Form validation is one of the most important parts of the software application. Today we will show you how to create form and validate it in ReactJS.

Form Validation in ReactJS, Simple form validation using react js, React js form validation example, React js form validation step by step for beginners. Example of form validation in React.

In this article, We will create a simple form with the use of different type of the fields and apply validation on each fields. Also we will handle the validation on Submit button click as well.

Way to implement: Form Validation in ReactJS

1. Setup react application
2. Install dependencies
3. Understanding of form fields and validation
4. Create form design
5. Manage form values in states
6. Implement Validation in Form
7. Output

1. Setup react application

First we have to setup the react application to create form validation demo in React JS. If you don’t know how to create react application then follow below link.

2. Install dependencies

We will add two major dependencies in react application

1. Add bootstrap for designing
2. Install react-select package for dropdown

1. Add bootstrap for designing

We will add bootstrap cdn css link in project for designing purpose only. For that, you have to add the following style link in public/index.html file.

public/index.html

2. Install react-select package for dropdown

In this demo, We will use react-select package to display dropdown. In order to use react-select you have to run below command to install package.

3. Understanding of form fields and validations

In this demo will cover all the type of fields and implement validation for each field. We can also consider it as signup form. Checkout the below list for better understanding.

4. Create form design

Now we will create a simple design for signup page by the use of bootstrap classes. We will also display an asterisk (*) mark for mandatory fields and at last we will use “Submit” button to handle the form.

We have to define the two class variables to manage the list of Country and Language fields and those variable must be written in constructor or somewhere in static file.

Now your code should look like below.

App.js

index.css

5. Manage form values in states

Now we will create state variable to manage all fields of the form. For that create state variable as “form” to store the value of the form in the form of an object.

We need one method where we can handle the change event of the html elements. It will be used to store the changed value in state variable. It should look like below.

Now we will bind those variables with the HTML elements. We will bind two attributes (value & onChange) to make it working.

Your render method should look like below.

Now we have to strict the number type for “Mobile” field. For that we have to validate the input field on key press event.

Now we have to handle the click event of the “Submit” button and write the console log of the form values.

6. Implement Validation in Form

Now we will create function where we can validate the field based on the input value and return the validation message.

Here we used refValue for Password and Confirm Password field to compare it with each other and based on it we are sending the appropriate message.

Below is the code where we define one more state variable as object to manage the error message.

Now we have to slightly change the “handleChange” method to validate the value after the setState. Checkout the updated method below.

To display the error message, We need to update render method same as below.

Now at last we need to change the submit handler to validate the form before submitting it.

That’s it for form validation.

7. Output

After following each step your whole code of file should look like below.

App.js