ReactJS Form Validation using Formik and Yup
ReactJS Form Validation using Formik and Yup packages is one good approach for form validation. we can validate forms using controlled components. But it may be time-consuming and the length of the code may increase if we need forms at many places on our website. Formik is designed to manage forms with complex validation with ease. Formik supports synchronous and asynchronous form-level and field-level validation.
Prerequisites
Below is the step-by-step implementation on how to do Form Validation using Formik and Yup.
Steps to create React Application
Step 1: Creating React Application And Installing Module:
npx create-react-app react-form
Step 2: After creating your project folder i.e.react-form, move to it using the following command:
cd react-form
Step 3: Install the required packages
npm i bootstrap formik yup
Project Structure:
The updated dependencies in package.json file will look like:
{
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.3.2",
"formik": "^2.4.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
"yup": "^1.3.2"
}
}
Example: Create a Login form with email and password validation using formic and yup and style the components using bootstrap css classes.
Javascript
import React from "react" ; import { Formik, Field, ErrorMessage, Form } from "formik" ; import * as Yup from "yup" ; import "bootstrap/dist/css/bootstrap.css" ; const LoginSchema = Yup.object().shape({ email: Yup.string() .email( "Invalid email address format" ) .required( "Email is required" ), password: Yup.string() .min(3, "Password must be 3 characters at minimum" ) .required( "Password is required" ), }); class App extends React.Component { render() { return ( <div className= "container" > <div className= "row" > <div className= "col-lg-12" > <Formik initialValues={{ email: "" , password: "" , }} validationSchema={LoginSchema} onSubmit={( values, { setSubmitting } ) => { console.log(values); // Simulating asynchronous operation, like an API call setTimeout(() => { alert( "Form is validated! Submitting the form..." ); setSubmitting( false ); }, 1000); }} > {(props) => ( <div> <div className= "row mb-5" > <div className= "col-lg-12 text-center" > {!props.isSubmitting ? ( <div> <h1> Login Page </h1>{ " " } <Form> <div className= "form-group" > <label htmlFor= "email" > Email </label> <Field type= "email" name= "email" placeholder= "Enter email" autoComplete= "off" className={`mt-2 form-control ${ props .touched .email && props .errors .email ? "is-invalid" : "" }`} /> <ErrorMessage component= "div" name= "email" className= "invalid-feedback" /> </div> <div className= "form-group" > <label htmlFor= "password" className= "mt-3" > Password </label> <Field type= "password" name= "password" placeholder= "Enter password" className={`form-control ${ props .touched .password && props .errors .password ? "is-invalid" : "" }`} /> <ErrorMessage component= "div" name= "password" className= "invalid-feedback" /> </div> <button type= "submit" className= "btn btn-primary btn-block mt-4" disabled={ props.isSubmitting } > {props.isSubmitting ? "Submitting..." : "Submit" } </button> </Form> </div> ) : ( <h1> Home Page </h1> )} </div> </div> </div> )} </Formik> </div> </div> </div> ); } } export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Contact Us