React Form Validation with Formik + Yup

Tram Ho

Creating form validation is a tedious but important task. React’s normal construction and validation of forms can be annoying when you need to create a state setting process to submit a form. Formik makes it possible to create a form in simpler ways. Combined with Yup, they help us build the authentication process easier.

Article included

  • Setting form fields and init values ​​with Formik
  • Handling user inputs
  • Create validation with Yup
  • Process submisstion form

In this article, I will build a simple registration form and process form validation. It includes full name, email, password and password confirmation fields.

Setting form fields and init values ​​with Formik

Below are examples and signup forms

As you can see, no state is declared to store the values ​​of the fields. We will not use the useState hook for that. Instead, we will use Formik to store them.

Let’s start by installing Formik

Formik provides a custom hook that returns all the necessary states and helper, which is called useFormik. It accepts an object that defines the configuration of the form.

We pass initialValue to the form into useFormik. The attribute name declared in initialValue matches the name of <input /> . States are returned and helpers can now be accessed from the formik variable. Thus, we can store the values ​​of the field and put them into our component input: value={formik.values.full_name} . No need React useState .

Handling user inputs

The next step would be to capture the user input value and store it in the Formik state. Formik provides us with a series of helper functions, one of which is handleChange . This function accepts the event object (returned from onChange) and uses the field name to store the value in the appropriate Formik state.

There is no need to pass the name field to handleChange as it will get field name =

Create validation with Yup

Setting forms and processing their inputs is easy, but validating those values ​​is not. We have to create a validator to validate all the fields. But thanks to Yup, we can create validation processes more easily.

What is Yup? Excerpt from the Yup document page:

“Yup is a JavaScript schema builder for value parsing and validation”

Translated as: “Yup is a Javascript schema for validating and validating analysis”. We can use Yup to create a validation schema and apply it with useFormik . Formik has an option for Yup called validationSchema .

First, install Yup:

We can then import Yup on the signup page above and create validation schema for our form:

There are 2 things I have done above, that is create a validation scheme with Yup and display error messages.

Create the validation schema with Yup

As you saw above, our schema is quite simple. We just chain the authentication functions to form a set of authentication schemes. For example, we want the value of full_name not be blank, be a string, have at least 2 characters and have a maximum of 15 characters. Then, with Yup, we can use the required , string , min and max . Error messages can be passed to each function.

The slightly more complex authentication that we often encounter is email authentication and password authentication. Fortunately, Yup also provides us with functions for email authentication and equivalent values. There are many great functions that Yup provides, you can find it in the Yup document page

Show the error messages

The useFormik hook returns errors and the touched state is used to display error messages.

  • errors : 1 object of form’s validation error.
  • touched : 1 object with boolean data type indicating whether the field has been accessed or not.

The formik valdation function runs on each user input key combination. That means errors object will contain all validation errors at any time. So we can display an error message like this:

The above code will display the error message as soon as they enter the content into a field. Normally we want the error mess to show up after the user has finished typing. That’s why we need touched state:

By checking the touched state, we can now show the error message after the user has entered the field.

Handling form submission

To handle the form submission, we need to pass the onSubmit option to the useFormik hook. We can access the submitted values ​​in the onSubmit function. You can do whatever you want with the values, such as using it as the payload to the API.

Another helper function that Formik provides is handleSubmit. It will execute the onSubmit function if there is no validation error. We can put the handleSubmit function in <form /> .

Below is the complete code of the SignUp form and its validation with Formik + Yup.

link code sandbox:


The above is a small example of validation form using Formik and Yup. Hopefully this article will help you in the process of improving your React skills. Thanks for visiting.


Share the news now

Source : Viblo