How To Build Form Validation With Formik and Yup Library In React Js

In this article, we will learn how to build validation with formik and yup library

Formik is used to manage form states easily make validation easy and handle onsubmit form data. When yup is used for making validation of forms.

First, you have to install formik and yup library in your project. you can see below how it is installed.

For formik,

npm i formik

For yup,

npm i yup

Here, Formik and Form components gave by the formik library. and it handles handlechange and handlesubmit and values like many more parameters of forms and manages the state of forms data automatically and also validates form data.

Using yup if you want any custom type of validation then create a yup object of validation and pass it in formik form.

formik form handle given yup validation in your forms data and give error in errors variables state. using the error state you can show the error of form data.

You can see demo of how to manage validation with yup in formik form,

import React, { useState } from 'react'
import * as yup from "yup";
import { Formik, Form } from 'formik';

export default function YupResolver() {
    const [formData, setFormData] = useState()
    const yupsolver = yup.object({
        email: yup.string().email('email is invalid').required('email is requird'),
        password: yup.string().min(6, 'password must be atleast 6 characters').required('password is requird')
    })
    return (
        <div className='text-center'>
            <h3>Login Form</h3>
            <Formik
                initialValues={{ email: '', password: '' }}
                validationSchema={yupsolver}
                onSubmit={(values) => {
                    setFormData(values)
                }}
            >
                {({
                    values,
                    errors,
                    handleChange,
                    handleSubmit,
                    isSubmitting,
                }) => (
                    <Form onSubmit={handleSubmit}>
                        <input
                            type="email"
                            name="email"
                            onChange={handleChange}
                            placeholder="Email"
                            value={values.email}
                        /><br />
                        {errors.email ? <div className='error mb-2 pb-5'>{errors.email}</div> : null}<br />
                        <input
                            type="password"
                            name="password"
                            placeholder="Password"
                            onChange={handleChange}
                            value={values.password}
                        /><br />
                        {errors.password ? <div className='error mb-2 p-0'>{errors.password}</div> : null}<br />
                        <button type="submit" disabled={isSubmitting} >
                            Submit
                        </button>
                    </Form>
                )}
            </Formik>
            {formData ? <> <label>You are login as {formData.email}</label></> : null}

        </div>
    )
}

You can see the output below,

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories