Form Validation

Basic Validation Patterns

Forms without validation are like cars without brakes — eventually you'll crash. Form validation ensures your users enter data in the right format before you process it. In React, validation happens right in your component, giving you instant feedback.

Think of validation as setting up rules for your form. "This field can't be empty," "This must be an email address," "This number must be between 1 and 100." When users break these rules, you let them know immediately.

Required Fields

The simplest validation is checking if a field has any value. You'd be surprised how often this catches errors. If a field is required and the user tries to submit empty, you can show an error message right away.

You can combine required validation with other checks. Maybe a field is required only if another field has a certain value. Or maybe different fields have different requirements based on user selections.

import { useState } from "react";

function RequiredField() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!email) {
      setError("Email is required");
      return;
    }
    setError("");
    alert("Form submitted!");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      {error && <p style={{ color: "red" }}>{error}</p>}
      <button type="submit">Submit</button>
    </form>
  );
}

Email Validation

Email validation is a classic example. You need to check if the entered text matches the pattern of an email address. While perfect email validation is complex, a simple regex can catch most common mistakes.

Here's a practical approach: check if the email contains an @ symbol and a domain. It won't catch every edge case, but it'll prevent obvious errors like "john" without a domain.

function validateEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

function EmailForm() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");

  const handleChange = (e) => {
    const value = e.target.value;
    setEmail(value);
    if (value && !validateEmail(value)) {
      setError("Please enter a valid email");
    } else {
      setError("");
    }
  };

  return (
    <div>
      <input value={email} onChange={handleChange} />
      {error && <p style={{ color: "red" }}>{error}</p>}
    </div>
  );
}

Displaying Error Messages

Good error messages are like friendly guides — they tell users exactly what's wrong and how to fix it. Don't just say "Invalid input." Say "Please enter a valid email address" or "Password must be at least 8 characters."

Show errors only when they exist, and clear them as soon as the user fixes the issue. This creates a smooth experience where users feel guided rather than frustrated. The goal is to help users succeed, not to punish them for mistakes.