Yup is a validation library used to check form rules like:

• required fields
• email format
• minimum length
• password rules

Instead of writing manual if condition, Yup does it in a clean way.

npm install yup

Example:

import { useState } from "react";
import * as Yup from "yup";

function App() {

  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");

  // 1. Yup validation schema
  const schema = Yup.object({
    name: Yup.string().required("Name is required"),
    email: Yup.string()
      .email("Invalid email format")
      .required("Email is required")
  });

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      // 2. validate data using Yup
      await schema.validate(
        { name, email },
        { abortEarly: false }
      );

      setError("");
      alert("Form Submitted");

    } catch (err) {

      // 3. show first error
      setError(err.errors[0]);

    }
  };

  return (
    <div style={{ textAlign: "center" }}>

      <h2>Yup Validation Example</h2>

      <form onSubmit={handleSubmit}>

        <input
          type="text"
          placeholder="Enter Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />

        <br /><br />

        <input
          type="email"
          placeholder="Enter Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />

        <br /><br />

        <button type="submit">Submit</button>

      </form>

      <p style={{ color: "red" }}>{error}</p>

    </div>
  );
}

export default App;