Formik is a React form library used to:

• Handle form state
• Validate inputs
• Manage form submission
• Reduce boilerplate code

It is mainly used for large and complex forms

npm install formik

Simple Form Validation:

import { useState } from "react";

function App() {

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

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

    if (name === "" || email === "") {
      setError("All fields are required");
    } 
    else {
      setError("");
      alert("Form Submitted");
    }
  };

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

      <h2>Simple Validation</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;

Form Validation Using Formik:

import { useFormik } from "formik";

function App() {

  const formik = useFormik({
    initialValues: {
      name: "",
      email: ""
    },

    validate: (values) => {
      let errors = {};

      if (!values.name) {
        errors.name = "Name is required";
      }

      if (!values.email) {
        errors.email = "Email is required";
      }

      return errors;
    },

    onSubmit: (values) => {
      alert("Form submitted");
    }
  });

  return (
    <form onSubmit={formik.handleSubmit}>

      <input
        name="name"
        onChange={formik.handleChange}
        value={formik.values.name}
      />
      <p>{formik.errors.name}</p>

      <input
        name="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />
      <p>{formik.errors.email}</p>

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

    </form>
  );
}

export default App;