A Step-by-Step Guide to Handling Form Validation in React
By: Aditya Singh
Tags: Nodejs, JavaScript, Programming, Reactjs, React

Getting Started

Let’s install both formik and yup into an existing/new React project by running:

npm install --save formik yup

Now it is time to create that login form as a React component. I will create this component as a functional component; you might create a class-based component depending, upon your use case.

This is a very basic form. And we are not doing much here. In a traditional approach, we would have the value of an input field saved in a state and then control it using the onChange event handler.

But why use component level state and spend time on writing long validation handler when we have formik and yup , right?

Alright! Let’s start by adding formik !

Here is what we did in the above code:

Wrapped our form inside formik so that we have access to formik’s event handlers, such as handleSubmit and handleChange .

inside formik so that we have access to formik’s event handlers, such as and . The initialValues prop of formik is used as our form’s initial values. You can see that we have specified that from line 13 to 16. These values are then destructured (line 22) so that we can use it as our form input values.

prop of formik is used as our form’s initial values. You can see that we have specified that from line 13 to 16. These values are then destructured (line 22) so that we can use it as our form input values. The onSubmit props of formik is called when the form is submitted. Because we have attached the handleSubmit event of our form (line 24) to its onSubmit event, formik’s onSubmit prop is called upon our form’s onSubmit event.

props of formik is called when the form is submitted. Because we have attached the event of our form (line 24) to its event, formik’s prop is called upon our form’s event. One last function that is very important for us is handleChange by formik. We bind this function to our input field’s onChange event handler so that formik can take care of any input change. The first parameter that this function accepts is the value of the form field that it is attached to.

Now, let’s add yup . Remember, yup is used for parsing our form values so formik can actually perform the final validation to these parsed values.

We added a validation schema to our component. This is the most interesting part of form validation and it usually sucks up most of our time. But not anymore — yup does all the value parsing of form for us. Just design the schema of your form and attach it to formik .

Important: Notice line 31.

Alright! Now that we have our validation all set, let’s start displaying errors as and when they occur. For this particular use case, formik provides users with a very handy error object. If any input field has an error, the corresponding key or the error object becomes truthy. Take a look at lines 23, 33, 41, and 52.

What next? Currently, whenever a user inputs an invalid form value in any field, all other fields show up the error message corresponding to their fields regardless of whether the user has ‘touched’ the field or not. This isn’t desired. Well, formik takes care of this part, too. Say hello to formiks touched object. It keeps a reference of whether the user has actually touches a field or not.

Let’s update our current code base with the touched object.

Looks good? Nice! One last thing: what happens if say the user entered an incorrect password? In this case, we want to update the error message of password field after we receive a login failure response from the server. Formik takes care of this too!

We simply destructure the errors object passed into our handleSubmit function to get setFieldError out of it. Using setFieldError , we can set the error value of a particular form field like so.

For the final touch, we’ll add handleBlur function of formik which takes care of the onBlur event of an input field and performs required validations.