React Form Validation Using Formik and Yup

React form validation is an essential part of web development. There are various libraries available to handle form validation in React. One of the most popular libraries is Formik. Formik is a lightweight and easy-to-use library that provides a simple way to handle forms in React. It also has built-in validation support. In this tutorial, we will learn how to use Formik and Yup to validate a form in React.

Yup is a validation library that allows us to define a schema for our data and validate it against that schema. It is very easy to use and integrates well with Formik. It provides a declarative way of defining validation rules for each form field.

Let’s get started with the code:

Step 1: Install the Required Libraries

To use Formik and Yup in our project, we need to install them first. Open your terminal and navigate to the project directory. Run the following command to install these libraries:

npm install formik yup

Step 2: Create a Form Component

Let’s create a simple form component with two fields – name and email. We will also add a submit button to the form. Here is the code for the form component:

import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";

const validationSchema = Yup.object().shape({
  name: Yup.string().required("Name is required"),
  email: Yup.string().email("Invalid email").required("Email is required"),
});

const initialValues = {
  name: "",
  email: "",
};

const onSubmit = (values) => {
  console.log(values);
};

const FormValidation = () => {
  return (
    <div>
      <h1>Form Validation</h1>
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={onSubmit}
      >
        {({ errors, touched }) => (
          <Form>
            <div>
              <label htmlFor="name">Name</label>
              <Field type="text" name="name" />
              <ErrorMessage name="name" />
            </div>

            <div>
              <label htmlFor="email">Email</label>
              <Field type="email" name="email" />
              <ErrorMessage name="email" />
            </div>

            <button type="submit">Submit</button>
          </Form>
        )}
      </Formik>
    </div>
  );
};

export default FormValidation;

import React from "react";

import { Formik, Form, Field, ErrorMessage } from "formik";

import * as Yup from "yup";

const validationSchema = Yup.object().shape({

name: Yup.string().required("Name is required"),

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

});

const initialValues = {

name: "",

email: "",

};

const onSubmit = (values) => {

console.log(values);

};

const FormValidation = () => {

return (

<div>

<h1>Form Validation</h1>

<Formik

initialValues={initialValues}

validationSchema={validationSchema}

onSubmit={onSubmit}

{({ errors, touched }) => (

<Form>

<div>

</div>

<div>

<label htmlFor="email">Email</label>

</div>

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

</Form>

)}

</Formik>

</div>

);

};

export default FormValidation;

In the above code, we have defined the validation schema using Yup. The validation schema defines the rules for each form field. We have defined the name field as required and the email field as required and valid email. We have also defined the initial values for the form fields and the onSubmit function that will be called when the form is submitted.

In the Formik component, we have passed the initialValues, validationSchema, and onSubmit props. The Form component is used to wrap the form fields. We have used the Field component to define the form fields and the ErrorMessage component to display the error messages for each field.

Step 3: Test the Form

Let’s test the form by rendering it in the App component. Here is the code for the App component:

import React from "react";
import FormValidation from "./FormValidation";

const App = () => {
  return (
    <div>
      <FormValidation />
    </div>
  );
};

export default App;

import React from "react";

import FormValidation from "./FormValidation";

const App = () => {

return (

<div>

</div>

);

};

export default App;