Field-Level Validation

Problem

Users filling out forms expect immediate feedback when they enter invalid data. Waiting until form submission to show all errors at once is jarring and forces users to hunt through the form to find and fix problems. This creates a poor experience, especially on long forms where errors might be scattered across multiple sections.

Solution

Validate individual form fields as users interact with them rather than waiting for submission. This provides immediate feedback that helps users correct mistakes before they invest time completing the entire form.

Example

This example demonstrates validating an email field as the user types to provide immediate feedback on input errors.

function EmailInput() {
  // Track email value and validation error state
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  // Validate email format
  const validateEmail = (value) => {
    // Simple email validation - check for @ symbol
    if (!value.includes('@')) {
      setError('Invalid email');
    } else {
      setError('');  // Clear error if valid
    }
  };

  return <input value={email} onChange={(e) => {
    // Update email value
    setEmail(e.target.value);
    // Validate immediately as user types
    validateEmail(e.target.value);
  }} />;
}

Benefits

• Provides immediate feedback as users type or blur fields
• Helps users fix errors before investing time in entire form
• Improves user experience with real-time validation
• Reduces frustration by catching mistakes early
• Can guide users toward valid input progressively

Tradeoffs

• Can feel aggressive if validation triggers too eagerly
• May frustrate users who haven’t finished typing
• Adds complexity managing validation state per field
• Requires careful UX design for when to show errors
• Can create jarring experience if not debounced properly