Form Validation Patterns in React

Good form validation improves user experience. Here's how to implement validation patterns effectively.

Native HTML Validation#

// Built-in browser validation
function SimpleForm() {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    console.log(Object.fromEntries(formData));
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        required
        placeholder="Email"
      />

      <input
        type="password"
        name="password"
        required
        minLength={8}
        pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
        title="Must contain uppercase, lowercase, and number"
      />

      <input
        type="tel"
        name="phone"
        pattern="[0-9]{10}"
        placeholder="Phone (optional)"
      />

      <button type="submit">Submit</button>
    </form>
  );
}

React Hook Form#

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email('Invalid email'),
  password: z
    .string()
    .min(8, 'Password must be at least 8 characters')
    .regex(/[A-Z]/, 'Must contain uppercase letter')
    .regex(/[0-9]/, 'Must contain number'),
  confirmPassword: z.string(),
}).refine((data) => data.password === data.confirmPassword, {
  message: 'Passwords do not match',
  path: ['confirmPassword'],
});

type FormData = z.infer<typeof schema>;

function RegistrationForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  const onSubmit = async (data: FormData) => {
    await registerUser(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <input
          {...register('email')}
          type="email"
          placeholder="Email"
        />
        {errors.email && (
          <span className="error">{errors.email.message}</span>
        )}
      </div>

      <div>
        <input
          {...register('password')}
          type="password"
          placeholder="Password"
        />
        {errors.password && (
          <span className="error">{errors.password.message}</span>
        )}
      </div>

      <div>
        <input
          {...register('confirmPassword')}
          type="password"
          placeholder="Confirm Password"
        />
        {errors.confirmPassword && (
          <span className="error">{errors.confirmPassword.message}</span>
        )}
      </div>

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Register'}
      </button>
    </form>
  );
}

Custom Validation Hook#

import { useState, useCallback } from 'react';

interface ValidationRule<T> {
  validate: (value: T) => boolean;
  message: string;
}

interface FieldConfig<T> {
  initialValue: T;
  rules: ValidationRule<T>[];
}

function useFormValidation<T extends Record<string, any>>(
  config: { [K in keyof T]: FieldConfig<T[K]> }
) {
  const [values, setValues] = useState<T>(() => {
    const initial = {} as T;
    for (const key in config) {
      initial[key] = config[key].initialValue;
    }
    return initial;
  });

  const [errors, setErrors] = useState<Partial<Record<keyof T, string>>>({});
  const [touched, setTouched] = useState<Partial<Record<keyof T, boolean>>>({});

  const validateField = useCallback(
    (name: keyof T, value: T[keyof T]): string | null => {
      const rules = config[name].rules;

      for (const rule of rules) {
        if (!rule.validate(value)) {
          return rule.message;
        }
      }

      return null;
    },
    [config]
  );

  const setValue = useCallback(
    (name: keyof T, value: T[keyof T]) => {
      setValues((prev) => ({ ...prev, [name]: value }));

      if (touched[name]) {
        const error = validateField(name, value);
        setErrors((prev) => ({ ...prev, [name]: error || undefined }));
      }
    },
    [touched, validateField]
  );

  const setFieldTouched = useCallback(
    (name: keyof T) => {
      setTouched((prev) => ({ ...prev, [name]: true }));
      const error = validateField(name, values[name]);
      setErrors((prev) => ({ ...prev, [name]: error || undefined }));
    },
    [values, validateField]
  );

  const validate = useCallback((): boolean => {
    const newErrors: Partial<Record<keyof T, string>> = {};
    let isValid = true;

    for (const name in config) {
      const error = validateField(name, values[name]);
      if (error) {
        newErrors[name] = error;
        isValid = false;
      }
    }

    setErrors(newErrors);
    return isValid;
  }, [config, values, validateField]);

  return {
    values,
    errors,
    touched,
    setValue,
    setFieldTouched,
    validate,
  };
}

// Usage
function ContactForm() {
  const { values, errors, touched, setValue, setFieldTouched, validate } =
    useFormValidation({
      name: {
        initialValue: '',
        rules: [
          { validate: (v) => v.length > 0, message: 'Name is required' },
          { validate: (v) => v.length >= 2, message: 'Name too short' },
        ],
      },
      email: {
        initialValue: '',
        rules: [
          { validate: (v) => v.length > 0, message: 'Email is required' },
          { validate: (v) => v.includes('@'), message: 'Invalid email' },
        ],
      },
    });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (validate()) {
      submitForm(values);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={values.name}
        onChange={(e) => setValue('name', e.target.value)}
        onBlur={() => setFieldTouched('name')}
      />
      {touched.name && errors.name && <span>{errors.name}</span>}

      <input
        value={values.email}
        onChange={(e) => setValue('email', e.target.value)}
        onBlur={() => setFieldTouched('email')}
      />
      {touched.email && errors.email && <span>{errors.email}</span>}

      <button type="submit">Submit</button>
    </form>
  );
}

Real-Time Validation#

// Debounced async validation
import { useState, useEffect } from 'react';
import { useDebounce } from './hooks/useDebounce';

function UsernameInput() {
  const [username, setUsername] = useState('');
  const [isChecking, setIsChecking] = useState(false);
  const [isAvailable, setIsAvailable] = useState<boolean | null>(null);

  const debouncedUsername = useDebounce(username, 500);

  useEffect(() => {
    if (debouncedUsername.length < 3) {
      setIsAvailable(null);
      return;
    }

    async function checkAvailability() {
      setIsChecking(true);
      try {
        const available = await checkUsername(debouncedUsername);
        setIsAvailable(available);
      } finally {
        setIsChecking(false);
      }
    }

    checkAvailability();
  }, [debouncedUsername]);

  return (
    <div>
      <input
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Username"
      />

      {isChecking && <span>Checking...</span>}

      {!isChecking && isAvailable === true && (
        <span className="success">Username available</span>
      )}

      {!isChecking && isAvailable === false && (
        <span className="error">Username taken</span>
      )}
    </div>
  );
}

Field-Level Components#

interface TextFieldProps {
  name: string;
  label: string;
  value: string;
  onChange: (value: string) => void;
  onBlur: () => void;
  error?: string;
  touched?: boolean;
  required?: boolean;
  type?: 'text' | 'email' | 'password';
}

function TextField({
  name,
  label,
  value,
  onChange,
  onBlur,
  error,
  touched,
  required,
  type = 'text',
}: TextFieldProps) {
  const showError = touched && error;

  return (
    <div className="field">
      <label htmlFor={name}>
        {label}
        {required && <span className="required">*</span>}
      </label>

      <input
        id={name}
        name={name}
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        onBlur={onBlur}
        aria-invalid={showError ? 'true' : 'false'}
        aria-describedby={showError ? `${name}-error` : undefined}
        className={showError ? 'error' : ''}
      />

      {showError && (
        <span id={`${name}-error`} className="error-message" role="alert">
          {error}
        </span>
      )}
    </div>
  );
}

// Usage
<TextField
  name="email"
  label="Email Address"
  value={values.email}
  onChange={(value) => setValue('email', value)}
  onBlur={() => setFieldTouched('email')}
  error={errors.email}
  touched={touched.email}
  required
  type="email"
/>

Server-Side Validation#

// Handle server validation errors
async function handleSubmit(data: FormData) {
  try {
    await api.createUser(data);
    router.push('/success');
  } catch (error) {
    if (error.response?.status === 400) {
      // Map server errors to form fields
      const serverErrors = error.response.data.errors;
      Object.keys(serverErrors).forEach((field) => {
        setError(field, {
          type: 'server',
          message: serverErrors[field],
        });
      });
    } else {
      // General error
      setError('root', {
        message: 'Something went wrong. Please try again.',
      });
    }
  }
}

// Display root errors
{errors.root && (
  <div className="alert alert-error">
    {errors.root.message}
  </div>
)}

Accessibility#

function AccessibleForm() {
  return (
    <form onSubmit={handleSubmit} noValidate aria-label="Contact form">
      <div className="field">
        <label htmlFor="email">
          Email Address
          <span className="required" aria-label="required">*</span>
        </label>

        <input
          id="email"
          type="email"
          aria-required="true"
          aria-invalid={!!errors.email}
          aria-describedby={errors.email ? 'email-error' : 'email-hint'}
        />

        <span id="email-hint" className="hint">
          We'll never share your email
        </span>

        {errors.email && (
          <span id="email-error" className="error" role="alert">
            {errors.email}
          </span>
        )}
      </div>

      {/* Announce form errors to screen readers */}
      <div aria-live="polite" className="sr-only">
        {Object.keys(errors).length > 0 && (
          <span>Form has {Object.keys(errors).length} errors</span>
        )}
      </div>

      <button type="submit">Submit</button>
    </form>
  );
}

Best Practices#

UX:
✓ Validate on blur, not on change
✓ Show errors after interaction
✓ Provide clear error messages
✓ Don't disable submit button

Performance:
✓ Debounce async validation
✓ Validate client-side first
✓ Use schema validation (Zod)
✓ Minimize re-renders

Accessibility:
✓ Use proper labels
✓ Add aria attributes
✓ Announce errors
✓ Support keyboard navigation

Good form validation combines immediate feedback with clear error messages. Use established libraries like React Hook Form with Zod for complex forms, implement real-time validation for critical fields, and always consider accessibility. The goal is helping users succeed, not catching mistakes.