Form validation in React is made simpler by using JavaScript libraries
Tags: javascript, webdev, learning, react
Published: 2023-08-09 18:33:24

### A Web developer’s step-by-step guide to implementing JavaScript libraries for validating forms.


#### Table of Content
- Introduction

- Prerequisite

- What is form validation

- Creating a form in React

- Top 4 form validation libraries

- Validating a React form with a library

- Conclusion

#### Introduction
Almost all available website in the world has a form. Therefore it is important to get the correct details filled in those forms. In this guide, we will learn what form validation is and how to validate forms more easily by using JavaScript libraries.  

#### Prerequisite
This guide is aimed at people with basic HTML, JavaScript, and React knowledge. If you are not familiar with these we recommend you to familiarize yourself with them before going through this guide.

#### What is form validation?
Form validation is the process of making sure that the text or details that a user is inputting into a form are in the correct format and within the restrictions of the application. For example, an email field is required to have at least one ‘@’ and one ‘.’, if the user inputs an email without ‘@’ the validation process kicks in and informs the user that the inputted email is invalid. The same process and rules go for other fields in your form.

#### Creating a form in React
In this part, we are going to create a simple react form.

![A simple react form code ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzn8xatcmbw1vj9ouf0f.png)

From the above image, we can see the code of a simple React form.
After setting up our environment, we have our form tag, input tag, and placeholder. (Ignore the tailwind styles from the above picture, it is there just to add little styles to form which we will see in the output below).

![A simple react form image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7arxn6skziawv5d2vc23.png)

Above we have the output of our simple React form, displaying the Name, Email, and password just as it is written in the code.

#### Top 4 form validation libraries

1. **React Hook Form**

![React Hook Form logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqjd9875p1tct9k895j7.png)

React Hook Form is a lightweight, flexible easy-to-use form validating library. React Hook Form reduces the amount of code you need to write while removing unnecessary re-renders.
Features of React Hook Form:

- Minimal re-renders

- Flexibility

- Useable with external UI Libraries

- Form State Management

- Error Handling

- Built-in Validation Rules

2. **Formik**

![Formik logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ll556jr5g5jxrtyg5vjt.png)

Formik is another popular and open-source form validation library. It offers a set of easy-to-understand components and utilities for form management and validation
Features of Formik:

- Declarative API
- Well documented
- Large and active community
- Error handling
- Asynchronous validation
- Validation schema integration
- Form events

3. **Yup**

![Yup logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mz7s4myb2o4vm6irj8vx.png)

Yup is a form validation library used in conjunction with form management libraries to handle form validation.
Features of Yup:

- Asynchronous validation
- Conditional validation
- Declarative Validation
- Flexibility
- Schema-based validation

4. **React Final Form**

![React Final Form logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0i0zprldqr8rar92ciq.jpg)

React Final Form is a form validation library for managing complex forms in React. It is suited for projects that require robust form validation, asynchronous form submissions, and dynamic form fields.
Features of React Final Form:

- Asynchronous validation
- Validation schema integration 
- Form events
- Performance optimizations
- Form state management

The above libraries are some of the most popular form validation libraries available.
As you continue with this article you will see how you can validate a form with one of the libraries listed above.

#### Validating a React form with a library
In this example, we will use React Hook Form library for the form validation.
To get started with this library, you need to install it with this single-line command below.

```
npm install react-hook-form
```
After the installation, we can import the ‘useForm’ hook and use it to validate our form.
In the image below we’ll see how we can use the react hook form to validate our form.

![Image of React hook form usage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/opkiwvqgiilfpyxiej90.png)Image 1.0

From the ‘useForm’ hook we can destructure it and get three properties out of it:

- The ‘Register’ function
- The ‘handleSubmit’ function
- The ‘formState’ object

The ‘register’ is a call-back function that returns props and is used to register the input fields.
When an input is registered the form can track its validation process and other properties.
The ‘handleSubmit’ function is passed to the ‘onSubmit’ event handler in your form tag, and this function handles the validation process and form submission for all registered inputs when the submit button is clicked passing the 'data' as an argument as you can see in image 1.0 above.
The ‘formState’ object contains multiple properties, but we use the ‘errors’ property in this example.
The ‘errors’ property contains validation errors if the details inputted in the input fields are not according to the rules you set, as you can see in image 1.0 above.
To make any input field required, you can add the ‘required’ object with the ‘message’ you want to display to the input field as seen in image 1.0 above.

The image below shows the result if the input field is empty

![Error image of an empty input field of a react form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i77k3bmp8vlw5ezmivlz.png)Image1.1

When it comes to validating an email field you will need a regular expression, the regular expression is stored in the ‘pattern’ object as seen in image 1.0 above as well as the error message you want to display.

The image below shows the result if the email format provided is invalid

![Error image of an invalid email input field of a react form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ztv10nxi7ucwgrtygnrz.png)Image 1.2

As we can see from the image above, the email provided does not have a “.com” so it displayed the error message we stored in the ‘pattern’ object.

![Validity image of filled input fields of a react form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g038senjxp5vkvjmwwdr.png)
As we can see in the image above, the data fields are not empty and the details inputted into the fields are in the right format so there are no error messages.

#### Conclusion
In conclusion, it is important to make sure that your forms are properly validated and the JavaScript libraries listed above are a very good and easy way to validate your web forms.

Now that you have learned how to use JavaScript libraries to validate your form, consider learning how to send email from an HTML contact form without any server code.