How to Validate Form in React: Simple and Effective Methods

To validate a form in React, use useState to track input values and errors, then check input validity on form submission or input change. Display error messages conditionally and prevent form submission if validation fails.

Syntax

Use React's useState hook to store form values and errors. Create a function to handle input changes and update state. Write a validation function to check inputs and set error messages. Use the onSubmit event on the form to trigger validation before processing data.

jsx

import React, { useState } from 'react';

function Form() {
  const [values, setValues] = useState({ field: '' });
  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    setValues({ ...values, [e.target.name]: e.target.value });
  };

  const validate = () => {
    const newErrors = {};
    if (!values.field.trim()) {
      newErrors.field = 'Field is required';
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (validate()) {
      // proceed with form submission
    }
  };

  return (
    <form onSubmit={handleSubmit} noValidate>
      <input name="field" value={values.field} onChange={handleChange} />
      {errors.field && <span>{errors.field}</span>}
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

Example

This example shows a simple form with one input field. It validates that the field is not empty when the user submits the form. If empty, it shows an error message and prevents submission.

jsx

import React, { useState } from 'react';

function SimpleForm() {
  const [values, setValues] = useState({ name: '' });
  const [errors, setErrors] = useState({});
  const [submitted, setSubmitted] = useState(false);

  const handleChange = (e) => {
    setValues({ ...values, [e.target.name]: e.target.value });
  };

  const validate = () => {
    const newErrors = {};
    if (!values.name.trim()) {
      newErrors.name = 'Name is required';
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (validate()) {
      setSubmitted(true);
    } else {
      setSubmitted(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} noValidate>
      <label htmlFor="name">Name:</label>
      <input
        id="name"
        name="name"
        value={values.name}
        onChange={handleChange}
        aria-describedby="name-error"
        aria-invalid={errors.name ? 'true' : 'false'}
      />
      {errors.name && <span id="name-error" style={{ color: 'red' }}>{errors.name}</span>}
      <button type="submit">Submit</button>
      {submitted && <p style={{ color: 'green' }}>Form submitted successfully!</p>}
    </form>
  );
}

export default SimpleForm;

Output

A form with a text input labeled 'Name:' and a submit button. If submitted empty, a red error message 'Name is required' appears below the input. If valid, a green success message 'Form submitted successfully!' appears.

Common Pitfalls

• Not preventing default form submission with e.preventDefault() causes page reload.
• Not trimming input values can allow spaces to pass validation.
• Updating state incorrectly can cause stale values or errors.
• Not associating error messages with inputs reduces accessibility.
• Validating only on submit can frustrate users; consider validating on input change.

jsx

/* Wrong: No preventDefault, no trimming, no error display */
function WrongForm() {
  const [value, setValue] = React.useState('');
  const handleSubmit = (e) => {
    // Missing e.preventDefault()
    if (value === '') {
      alert('Empty input');
    }
  };
  return <form onSubmit={handleSubmit}><input value={value} onChange={e => setValue(e.target.value)} /><button type="submit">Submit</button></form>;
}

/* Right: Prevent default, trim input, show error */
function RightForm() {
  const [value, setValue] = React.useState('');
  const [error, setError] = React.useState('');
  const handleSubmit = (e) => {
    e.preventDefault();
    if (value.trim() === '') {
      setError('Input cannot be empty');
    } else {
      setError('');
      // proceed
    }
  };
  return (
    <form onSubmit={handleSubmit} noValidate>
      <input value={value} onChange={e => setValue(e.target.value)} aria-invalid={error ? 'true' : 'false'} />
      {error && <span style={{ color: 'red' }}>{error}</span>}
      <button type="submit">Submit</button>
    </form>
  );
}

Quick Reference

• useState: Store input values and errors.
• handleChange: Update state on input change.
• validate: Check inputs and set errors.
• handleSubmit: Prevent default, run validation, submit if valid.
• Accessibility: Use aria-invalid and aria-describedby for error messages.

Key Takeaways

Use React state to track form inputs and validation errors.

Always prevent default form submission to control validation flow.

Trim input values before validating to avoid false positives.

Show clear error messages near inputs and use ARIA attributes for accessibility.

Validate inputs on submit and optionally on change for better user experience.