Form Validation in React

In the previous article, we learned how to control a single input. But in the real world, forms usually don’t have just one field.

A typical registration form has name, email, password, password confirmation, address, acceptance of terms… and very importantly, we need validation rules.

If we try to do this by creating a useState variable for each field and another useState variable for each error, your component will basically become a nightmare.

Today we are going to see how to tackle this without going crazy in the attempt.

Single State Strategy

Instead of having name, setName, email, setEmail… we are going to group the entire form into a single state object. We already hinted at this in the previous article, but now it’s mandatory.

And not only that, now we need a second state for errors.

const [formData, setFormData] = useState({
  username: '',
  email: '',
  password: ''
});

const [errors, setErrors] = useState({});

The validate Function

We are going to separate the validation logic from the rendering logic. We’ll create a function that receives the data and returns the errors found.

const validate = (values) => {
  const errors = {};
  const regexEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (!values.username) {
    errors.username = "Username is required";
  }

  if (!values.email) {
    errors.email = "Email is required";
  } else if (!regexEmail.test(values.email)) {
    errors.email = "Email format is not valid";
  }

  if (!values.password) {
    errors.password = "Password is required";
  } else if (values.password.length < 6) {
    errors.password = "Password must be at least 6 characters";
  }

  return errors;
};

Handling Submission (onSubmit)

This is where we orchestrate everything. When the user tries to submit:

const handleSubmit = (e) => {
  e.preventDefault();
  
  // 1. Validate the current data
  const validationErrors = validate(formData);
  
  // 2. Update the visual error state
  setErrors(validationErrors);

  // 3. Check if the error object is empty
  if (Object.keys(validationErrors).length === 0) {
    console.log("Form valid. Sending data...", formData);
    // Here would go the API call
    // sendData(formData);
  } else {
    console.log("Form invalid, correct the errors");
  }
};

Visual Feedback (UX)

It’s useless to validate internally if we don’t tell the user what they are doing wrong, through some messages.

In our JSX, we are going to conditionally render an error message below each input only if there is an error associated with that field.

<div>
  <label>Email</label>
  <input 
    type="email" 
    name="email" 
    value={formData.email} 
    onChange={handleChange}
    // Add a conditional CSS class to make the border red
    className={errors.email ? 'input-error' : ''}
  />
  
  {/* Conditional rendering of the message */}
  {errors.email && <span className="error-message">{errors.email}</span>}
</div>

The “Immediate Shouting” Problem

If we implement real-time validation (in onChange), we have a User Experience (UX) problem.

If I validate that the email must have an at sign @, as soon as the user types the first letter “L”, a huge red error will pop up: “INVALID EMAIL”. Of course it’s invalid, I haven’t finished typing! That’s very aggressive and annoying.

To solve this, we introduce a third state: Touched.

const [touched, setTouched] = useState({});

const handleBlur = (e) => {
  // When the user leaves the input (loses focus)
  setTouched({
    ...touched,
    [e.target.name]: true
  });
  
  // Optional: Validate here too
};

Now, we only show the error if the field has an error and has been touched (or if we have tried to submit).

{errors.email && touched.email && <span className="error">{errors.email}</span>}

We will use the onBlur event on the inputs to mark the field as “touched”.

import { useState } from 'react';
import './Formulario.css'; // We assume styles for .error

export default function RegistrationForm() {
  const [formData, setFormData] = useState({ username: '', email: '' });
  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
    
    // Optional: Clear the error as soon as the user starts correcting it
    if (errors[name]) {
      setErrors({ ...errors, [name]: null });
    }
  };

  const validate = () => {
     // ... (Validation logic seen above)
     const newErrors = {};
     if(!formData.username) newErrors.username = "Required";
     if(!formData.email.includes('@')) newErrors.email = "Invalid email";
     return newErrors;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const validationErrors = validate();
    setErrors(validationErrors);

    if (Object.keys(validationErrors).length === 0) {
      alert("Submitted successfully!");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="form-group">
        <label>Username</label>
        <input
          name="username"
          value={formData.username}
          onChange={handleChange}
          style={{ borderColor: errors.username ? 'red' : 'initial' }}
        />
        {errors.username && <small style={{color: 'red'}}>{errors.username}</small>}
      </div>

      <div className="form-group">
        <label>Email</label>
        <input
          name="email"
          value={formData.email}
          onChange={handleChange}
          style={{ borderColor: errors.email ? 'red' : 'initial' }}
        />
        {errors.email && <small style={{color: 'red'}}>{errors.email}</small>}
      </div>

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