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

Create Validation Schema:

import * as yup from "yup";

const signupSchema = yup.object({
    name: yup
        .string()
        .required("Name is required")
        .min(2, "Name must be at least 2 characters"),

    email: yup
        .string()
        .required("Email is required")
        .email("Invalid email address"),

    phone: yup
        .string()
        .required("Phone number is required")
        .matches(/^[0-9]{10}$/, "Phone number must be 10 digits"),

    password: yup
        .string()
        .required("Password is required")
        .min(8, "Password must be at least 8 characters")
});

Validate before API Call:

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

    setSuccessMessage("");
    setErrorMessage("");

    try {
        await signupSchema.validate(
            { name, email, phone, password },
            { abortEarly: true }
        );

        const response = await signupUser({
            name,
            email,
            phone,
            password
        });

        setSuccessMessage(response.message || "Signup successful");

    } catch (error) {
        setErrorMessage(error.message);
    }
};

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;