📘 Day 11 — Form Validation Basics (HTML5 + JS)

Form validation ensures users enter the correct data before submission. React supports both built-in HTML5 validation and custom JavaScript validation.

🔹 HTML5 Validation

HTML5 offers attributes like required, pattern, minLength, and type for quick validation.

function HtmlValidationForm() {
  return (
    <form>
      <input type="email" required placeholder="Enter your email" />
      <input type="password" required minLength="6" placeholder="Password" />
      <button type="submit">Submit</button>
    </form>
  );
}
  

🔸 JavaScript Custom Validation

For more control, you can use JavaScript to show dynamic error messages and validate logic-based rules.

import React, { useState } from "react";

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

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!email.includes("@")) {
      setError("Invalid email address!");
    } else {
      setError("");
      alert("Submitted successfully!");
    }
  };

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

Form validation improves user experience and data reliability. Combining HTML5 and JS gives the best of both worlds!

← Prev Next →