Real-time Form Validation in React: A Pro Guide

Previously in this course, we explored the fundamental trade-offs between controlled and uncontrolled components. While those techniques provide the mechanics for gathering data, they don't solve the critical problem of ensuring that data is actually valid before it hits your API.

In this lesson, we are moving beyond simple data collection to implement real-time form validation. By validating inputs on change, we provide immediate feedback that improves UX and prevents unnecessary server round-trips for invalid submissions.

Principles of Real-time Validation

When building production-ready forms, validation isn't just an afterthought; it's a core component of the user interface. Good validation follows three rules:

1. Immediate Feedback: Users should know if their input is valid as soon as they stop typing or leave the field.
2. Contextual Errors: Error messages must be specific and placed near the relevant input.
3. Submission Guardrails: The "Submit" button should be disabled or handle states gracefully if the form contains invalid data.

Implementing Real-time Validation

To implement this, we need to track two pieces of state for every field: the value itself and the error message associated with it.

Worked Example: A User Profile Form

Let's build a simple username field that requires at least five characters. We'll use local state to track the value, the error, and whether the user has "touched" the field (to avoid showing errors before the user even types).

JSX
import { useState } from CE9178">'react';

export function UsernameField() {
  const [value, setValue] = useState(CE9178">'');
  const [error, setError] = useState(CE9178">'');
  const [isTouched, setIsTouched] = useState(false);

  const validate = (val) => {
    if (val.length < 5) return CE9178">'Username must be at least 5 characters.';
    return CE9178">'';
  };

  const handleChange = (e) => {
    const newValue = e.target.value;
    setValue(newValue);
    // Validate on every change, but only show if touched
    if (isTouched) {
      setError(validate(newValue));
    }
  };

  const handleBlur = () => {
    setIsTouched(true);
    setError(validate(value));
  };

  return (
    <div>
      <label htmlFor="username">Username</label>
      <input
        id="username"
        value={value}
        onChange={handleChange}
        onBlur={handleBlur}
        className={error ? CE9178">'input-error' : CE9178">''}
      />
      {error && <span className="error-text">{error}</span>}
    </div>
  );
}

By decoupling isTouched from the value, we prevent the "annoying validation" pattern where an error message flashes while the user is still typing their first character.

Toggling Submission States

A common pitfall is allowing users to click "Submit" while the form is in an invalid state. We can manage this by checking our error state before executing our submission handler.

If you are handling multiple fields, you might want to aggregate these errors in a parent component or a useReducer hook, as discussed in our guide on managing object-based state.

Hands-on Exercise

1. Create a Form component that includes an "Email" field and a "Username" field.
2. Implement a validateEmail function that checks for the presence of @ and ..
3. Add a submit button that remains disabled (disabled={!isValid}) until both fields meet their requirements.
4. Add a "submitting" state that shows a loading indicator when the form is being processed.

Common Pitfalls

• Validating on every render: Avoid running heavy validation logic inside the component body. Keep it inside your event handlers or use useMemo if the validation logic is computationally expensive.
• Forgetting Accessibility: Always associate your error messages with the input using aria-describedby. Screen readers won't automatically know that your <span> is the reason the input is invalid.
• Validation Overkill: Don't validate too early. If a user is typing an email, don't show an "Invalid Email" error after they type the first character. Use the onBlur event to trigger validation or implement a debounce pattern.

Recap

Real-time validation is the bridge between a simple input and a resilient UI. By tracking the "touched" state and providing clear, contextual error messaging, you ensure that the user is guided toward a successful submission rather than being frustrated by opaque errors.

In our next lesson, we will take this further by moving away from manual validation functions toward schema-based validation, which allows us to handle complex forms with significantly less boilerplate code.

Up next: Schema-based Validation with Zod