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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
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; |
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:
1 2 3 4 5 6 7 8 9 10 11 12 |
import React from "react"; import FormValidation from "./FormValidation"; const App = () => { return ( <div> <FormValidation /> </div> ); }; export default App; |