Form validation patterns in Remix - Mini Project: Build & Apply

Form validation patterns

📖 Scenario: You are building a simple signup form for a website using Remix. The form should collect a user's username and email. You want to make sure the user enters a username and a valid email before submitting.

🎯 Goal: Create a Remix form with two input fields: username and email. Add basic validation to check that the username is not empty and the email contains an '@' symbol. Show error messages if validation fails.

📋 What You'll Learn

Create a Remix form with username and email input fields

Add a validation function to check username is not empty

Add a validation function to check email contains '@'

Display error messages below each input if validation fails

Use Remix action function to handle form submission and validation

💡 Why This Matters

🌍 Real World

Forms are everywhere on websites and apps. Validating user input ensures data quality and prevents errors.

💼 Career

Understanding form validation in Remix is important for building reliable web applications and improving user experience.

1

Set up initial form data

Create a variable called formData as an object with keys username and email, both set to empty strings.

Remix

# Create formData object with username and email as empty strings
# Your code here

Hint

Think of formData as a box holding the values typed in the form fields.

2

Add validation rules

Create a function called validateForm that takes formData as input and returns an object called errors. Add these rules: if username is empty, add errors.username = 'Username is required'. If email does not include '@', add errors.email = 'Email must include @'.

Remix

const formData = { username: '', email: '' };

// Create validateForm function to check username and email
# Your code here

Hint

Use simple if checks and return an object with error messages.

3

Implement Remix action for form submission

Create an async function called action that takes { request } as argument. Inside, get form data using await request.formData(). Extract username and email from the form data. Use validateForm to get errors. If errors has any keys, return them as JSON. Otherwise, return a success message as JSON.

Remix

const formData = { username: '', email: '' };

function validateForm(formData) {
  const errors = {};
  if (!formData.username) {
    errors.username = 'Username is required';
  }
  if (!formData.email.includes('@')) {
    errors.email = 'Email must include @';
  }
  return errors;
}

// Create async action function to handle form submission
# Your code here

Hint

Use Remix's action function to process form data and return validation results.

4

Build the form component with error display

Create a default exported React function component called SignupForm. Inside, use useActionData() to get actionData. Render a <form method='post'> with two inputs: username and email. Below each input, if actionData?.errors?.username or actionData?.errors?.email exist, show them in a <div> with role='alert'. Add a submit button labeled 'Sign Up'.

Remix

const formData = { username: '', email: '' };

function validateForm(formData) {
  const errors = {};
  if (!formData.username) {
    errors.username = 'Username is required';
  }
  if (!formData.email.includes('@')) {
    errors.email = 'Email must include @';
  }
  return errors;
}

export async function action({ request }) {
  const form = await request.formData();
  const username = form.get('username') || '';
  const email = form.get('email') || '';
  const errors = validateForm({ username, email });
  if (Object.keys(errors).length) {
    return { errors };
  }
  return { success: true };
}

// Create SignupForm component with form and error messages
# Your code here

Hint

Use useActionData() to get errors and show them below inputs with role='alert' for accessibility.