Form Validation in React
Before we just start you can take a look at the app running here OR take a look at the code on GitHub OR see the demo here!

So you want to do form validation in React? But didn’t find any great simple resource for doing this? Want pro-type validation that works like a charm?
So this article is definitely for you, hold on with me to build a great little application🎯

1. Set React App and Packages:
We will be using create-react-app for making a React application. Let’s just create a new React app using:
$ npm install -g create-react-app
$ create-react-app form-validation-react
Run the app
$ cd form-validation-react/
$ npm start
This will open our newly created app on http://localhost:3000/
We will use the following packages that will help us achieve our goal, though they are not mandatory
- Bootstrap
- Validator.js
- classnames
Now, let’s grab these packages real quick
$ npm install bootstrap validator classnames
2. Create Validation Rules:
Create a file Validation.js
in src/
directory of the application. This file will be responsible for validating our form fields. Let’s quickly see the file’s contents.
The above file exports the instance of a class that contains methods to validate our fields. We can import this instance of class anywhere and call its methods like validateFields.validateEmail('email_to_validate_goes_here’)
to check if the email is valid or not.
Also, read
3. Setting up the Form Component:
Now, we’ve set up our validation rules. Let’s create a component Form.js
that will contain our form. We will start by just making a class-based React Component as:
At the top, we’re importing validateFields
which is the instance of our validation rules class in Validation.js
. The state for this component contains fields for each input in our form with some properties like value
and error
for that field.
The markup for our Form
I’ve put the form inside a bootstrap card just to make the form look better. When the user submits the form, an event handleSubmit
is triggered which validates all the fields and submits the form. Then we’ve two inputs one for email and one for the password.
The input boxes are given a class name form-control
which is a bootstrap class for input tag styling. The input tag has two conditional class names is-valid
and is-invalid
. The is-valid
class is given when there is no error for that field and is-invalid
class is given when there is an error for that field. Note these two class names are coming from bootstrap and they just change the border of the input to red if it’s invalid and green if it’s valid. The input tags are also given onChange
and onBlur
event handlers with the validation function passed as an argument. We will explore these event handlers in detail later in this tutorial. After the input tag there is a div
with a class name invalid-feedback
that just displays the field’s error message.
The submit button for the form has given onMouseDown
event handler that updates a property submitCalled
in the state of our component to true
. We will see why we are doing this when I explain other event handlers.
Event Handlers
Now, the last thing missing in our component is event handlers. Let’s add them to complete Form.js
component.
Here we have three event handlers handleBlur
, handleChange
and handleSubmit
. Let’s explore them one-by-one.
handleBlur
This method is triggered when an input box loses focus. It does the following things:
- First, we get the field from which the focus is loosed using
event.target.name
. - Next, we check if
validateOnChange
for that field isfalse
because we don’t want the field to be validated on blur if it’s already being validated byonChange
. - We’re also checking if the
submitCalled
isfalse
. Here comes the time to explainonMouseDown
event handler given to the submit button. The reason why we are assigning mouse down event to submit button and updatingsubmitCalled
totrue
in the state is that when a field is focused and user clicks the submit button, two events triggeronBlur
andonSubmit
whereonBlur
is called beforeonSubmit
which causes theonSubmit
to not work properly because both the event handlers are updating the state. We don’t want theonBlur
event handler to do anything when the form is being submitted that’s why we’re checking ifsubmitCalled
isfalse
before doing anything inonBlur
. - If the above conditions are fulfilled, then we set
validateOnChange
property for that field totrue
anderror
to whatever is returned by our validation method (either error message or false).
handleChange
This method triggers when the value of an input field is changed. It is pretty simple and does the following:
- Updates the value in the state for that field.
- Checks for error if
validateOnChange
istrue
for that field.
handleSubmit
handleSubmit
is triggered when the form is submitted. Our approach in this method is to validate all the fields of our form, if anyone of the field is not valid then prevent the form submission and update the error message for that field in the state.
- First, we are passing the values of email and password to our validation methods and storing the results in separate variables
- Then we are evaluating the results returned by the validation methods to check if all the error results are
false
using JavaScript high order functionevery
. - If there are no errors then we submit the form else the state is updated with errors.
4. Import Form Component in App.js:
YES! We did it, hope you survived step 3 😂. I know it was a lot but it definitely worth it. Now we just need to import and render our Form.js
component in App.js
just like this:
5. Add CSS: (Optional)
To make your application look same as mine you need to replace your App.css
with this:
.App {
display: flex;
align-items: center;
height: 100vh;
background-color: #282c34;
}
.App-content {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
width: 6rem;
margin-top: -1.5rem;
margin-bottom: 1.5rem;
}@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Summary:
The validation procedure is pretty simple but very effective. You can optimize the code further for scalability. I have used bootstrap for making the input boxes red/green according to their error status but you are not bound to use bootstrap. You can define your own stylesheet for doing this, just make it as you feel comfortable.
Feel free to comment if you find anything wrong or write if something can be changed to make it easier.