Form validation patterns in Remix

Introduction

Form validation helps check user input before saving or sending it. It stops mistakes and keeps data clean.

When you want to make sure users enter a valid email address.

When you need to check that a password is strong enough.

When you want to confirm required fields are not empty.

When you want to give users quick feedback on their input.

When you want to prevent bad data from reaching your server.

Syntax

Remix

export const action = async ({ request }) => {
  const formData = await request.formData();
  const email = formData.get('email');

  if (!email || !email.includes('@')) {
    return json({ error: 'Please enter a valid email' }, { status: 400 });
  }

  // continue processing valid data
  return redirect('/success');
};

Use the action function to handle form submissions in Remix.

Return errors as JSON with a status code to show validation messages.

Examples

Check if password is at least 8 characters long.

Remix

const password = formData.get('password');
if (!password || password.length < 8) {
  return json({ error: 'Password must be at least 8 characters' }, { status: 400 });
}

Validate that age is a number and at least 18.

Remix

const age = Number(formData.get('age'));
if (isNaN(age) || age < 18) {
  return json({ error: 'You must be 18 or older' }, { status: 400 });
}

Ensure username is not empty or just spaces.

Remix

const username = formData.get('username');
if (!username || username.trim() === '') {
  return json({ error: 'Username is required' }, { status: 400 });
}

Sample Program

This Remix component shows a form to enter an email. It checks if the email includes '@'. If not, it shows an error message below the input. If valid, it redirects to a thank-you page.

Remix

import { json, redirect } from '@remix-run/node';
import { useActionData, Form } from '@remix-run/react';

export const action = async ({ request }) => {
  const formData = await request.formData();
  const email = formData.get('email');

  if (!email || !email.includes('@')) {
    return json({ error: 'Please enter a valid email' }, { status: 400 });
  }

  return redirect('/thank-you');
};

export default function EmailForm() {
  const actionData = useActionData();

  return (
    <Form method="post" aria-label="Email submission form">
      <label htmlFor="email">Email:</label>
      <input id="email" name="email" type="email" aria-required="true" aria-invalid={actionData?.error ? 'true' : 'false'} />
      {actionData?.error && <p role="alert" style={{ color: 'red' }}>{actionData.error}</p>}
      <button type="submit">Submit</button>
    </Form>
  );
}

Important Notes

Always validate on the server side to keep data safe.

Use aria-invalid and role="alert" for accessibility.

Client-side validation can improve user experience but never replace server validation.

Summary

Form validation checks user input to avoid errors.

In Remix, use the action function to validate form data.

Show clear error messages and use accessibility features for better user experience.