Form Validation for React using Yup

Before submitting data to the server, it is important to make sure all required form controls are filled out, in the correct format. This is called client-side form validation

Photo by Nick Morrison on Unsplash

Reasons to do Client-side validations?

Forms validation on the client-side is essential — it saves time and bandwidth and gives you more options to point out to the user where they’ve gone wrong in filling out the form.

Get Nandhini Madan’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

2 Reasons to use client-side validations:

1. It’s a fast form of validation: if something’s wrong, the alarm is triggered upon submission of the form.
2. You can safely display only one error at a time and focus on the wrong field, to help ensure that the user correctly fills in all the details you need.

Install Yup

npm install -S yup

Create React app:

Login Page:

Yup Schema:

Now it’s time to create form schema to validate the data which we get through API or through form. Schema objects are immutable, so each call of a method returns a new schema object.

For nested schemas yup.reach will retrieve a nested schema based on the provided path.

Login

If user don’t provide data, then error message will be displayed.