Form Validation Basics

You can add validation logic to form fields using JavaScript inside event handlers or using conditional rendering.

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

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!email.includes("@")) {
      setError("Invalid email address");
    } else {
      setError("");
      // Proceed with submit
    }
  };

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

• Use e.preventDefault() to stop default submission.
• Set error messages based on validation checks.