Form Validation Patterns

Good validation helps users complete forms, not fight them. Synchronous rules catch local issues such as required fields, length, and format. Asynchronous validation checks server-owned facts such as username availability. Treat them differently so the form feels responsive and fair.

Field-Level Sync Validation

Run sync validation on blur, then on change after the field has been touched. This avoids showing errors before the user has a chance to type.

type FieldState = {
  value: string;
  touched: boolean;
  error: string | null;
};

export function validateEmail(value: string): string | null {
  if (!value.trim()) return "Email is required.";
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return "Enter a valid email.";
  return null;
}

export function onEmailBlur(field: FieldState): FieldState {
  return {
    ...field,
    touched: true,
    error: validateEmail(field.value),
  };
}

Debounced Async Validation

Async validation should run only after sync validation passes. Otherwise the app wastes server calls checking values that are already invalid locally.

export function createUsernameValidator(
  checkAvailability: (username: string) => Promise<boolean>,
  delayMs = 350,
) {
  let timeoutId: ReturnType<typeof setTimeout> | undefined;

  return (username: string) =>
    new Promise<string | null>((resolve) => {
      if (timeoutId) clearTimeout(timeoutId);
      timeoutId = setTimeout(async () => {
        const available = await checkAvailability(username);
        resolve(available ? null : "Username is already taken.");
      }, delayMs);
    });
}

Accessible Errors

Connect each error message to its input with aria-describedby, and set aria-invalid when an error exists. Form-level errors belong in a summary near the top, ideally in a focusable or announced region after submission fails.

export function inputA11yProps(fieldId: string, error: string | null) {
  return {
    id: fieldId,
    "aria-invalid": error ? "true" : "false",
    "aria-describedby": error ? `${fieldId}-error` : undefined,
  };
}

Further Learning

Search these terms to go deeper:

• “aria-describedby form validation” — connecting errors to fields accessibly
• “debounced async validation username” — server-backed field checks
• “form error summary screen reader” — accessible submission failure patterns
• “schema validation client server shared” — keeping rules consistent across boundaries

Form Validation Patterns

Good form validation helps people fill out a form, instead of nagging them. The secret is mostly about timing — showing the right error at the right moment, not the instant they click into an empty field.

Two kinds of checks

• Instant checks — things you can verify on the spot: “email is required,” “must be a valid format,” “password too short.” No server needed.
• Server checks — things only the server knows: “is this username taken?” These require an API call.

Timing: validate on blur, not on every keystroke

Don’t yell at someone the moment they start typing. A good rule: check a field when they leave it (blur), then keep it updated as they fix it:

function validateEmail(value) {
  if (!value.trim()) return 'Email is required.'
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return 'Enter a valid email.'
  return null   // null = no error
}

Server checks: wait and debounce

For “is this username taken?”, don’t hit the server on every keystroke. Wait until they pause typing (debounce), and only check if the instant checks already passed — no point asking the server about an obviously invalid value:

// only after ~350ms of no typing, and only if format is valid
const available = await checkUsername(value)

Make errors accessible

Screen-reader users need errors announced too. Link each error message to its input with aria-describedby, and mark the field aria-invalid when it has an error. This is easy to add and matters a lot.

In one sentence

Validate helpfully by timing it right — check instant rules when a field loses focus, debounce server checks (only after instant checks pass), and wire errors to inputs with aria-describedby for accessibility.

Want to go deeper?

Switch to Expert mode above for the debounced async validator, full accessibility props, and field-vs-form-level errors.