Form validation with Formik and Yup — Reactjs

You need to validate the form to make sure that user inputs the right values. Client side validation is performed on the web browser before input is send to the server.

We will be using Formik to validate the form.

Formik takes care of the repetitive and annoying stuff — keeping track of values/errors/visited fields, orchestrating validation, and handling submission — so you don’t have to. This means you spend less time wiring up state and change handlers and more time focusing on your business logic. Read more here.

Formik has it’s own Form, Field and Formik elements. The form can be wrapped by the Formik component. The Field element is used to connect the inputs to Formik. Form is a hook around HTML form to connect it with Formik handlers.

<Formik></Formik> component most used properties are initialValues where all the initial values of input fields are declared and onSubmit handler. onSubmit by default doesn’t allow form submitting until all the fields are validated to true. Here you can find a full list of Formik properties.

Another property of Formik that we will use is validationSchema that is used for validation purposes. By default, validationSchema is false. You can pass a Yup schema to this property. Yup is a JavaScript schema builder for value parsing and validation. This property tells formik to run validation when submitting a form. Here you can read all the APIs that Yup has for validating your inputs.

Setting up the project

Create react app

Let’s first create the react application:

npx create-react-app form-validation-fomrik
cd form-validation-formik
npm start

Install Formik:

npm install formik --save

Install Yup

npm install yup --save

Setting up the form

Create the form

We will create a registration form. The form has these fields: name, lastname, email, password and repeat password. We will be using Form and Field elements from Formik so that we can hook them with Formik component.

Wrap the form inside Formik component. Add initial values and onSubmit handler.

As mentioned above we will use Yup for validation. We will create RegistrationSchema will all the validations. You can check Yup official documentation for all the APIs that you can use. In this case we will be using required for all fields, min for name and lastname, email, matches to add the RegEx for the password and oneof to check that repeat password is not empty and is the same as password. Then we will pass RegistrationSchema to the validationSchema property.

Now we will handle the errors. We will show them under each field by using a span and also will change the color of the input to a light red if there is an error by using error className.

We will do the same thing for all the fields.

Styling the form

We will add all the styles for the form at From.css and then import it at Form.js.

That’s how the form looks now:

Check validations

If we leave all fields empty and submit the form all the required error messages will be shown:

When start typing on any of the fields it will automatically be checked if the input is valid so you don’t have to submit the form again to check for errors.

Success

Sandbox