Validating ReactJS Forms

Validating ReactJS Forms

In this snippet i will show you how to validate Reactjs forms with a ready made package called react-form-validator-core and we will see the various validation rules as well as how to create a custom rule.

 

 

 

Validating Reactjs applications can sometimes be done with a little vanilla javascript by writing a custom code to handle form validation. But when the web app becomes too big, code becomes too complicated, for that reason using a package to handle this situation is the better solution, so in this tutorial i will show how to validate forms simply by using this package react-form-validator-core.

 

This package comes with two predefined components:

  • ValidatorForm: Represent the html <form /> element but enhanced with some props useful for validation.
  • ValidatorComponent: This component represent any html input, so you need to create a custom element using this component as we will see below.

Let’s start with a simple registration form:

Register.js

In the above component we created a simple registration form. When you change any of the fields it stores it’s value in the state. When the user click submit the form show an alert message. But what if the user not left any of the fields unfilled we need to show an error message to fill that field.

So we will refactor that form to use the validation components mentioned above. First we need to create a custom component that represent the <input /> element. This component extends from ValidatorComponent. Second we need to replace the <form /> tag with <ValidatorForm /> component.

 

Register.js

TextIput.js

As you see above i have refactored the main Register component and made a lot of modifications. I created a TextInput component which extends from ValidatorComponent. The ValidatorComponent internally extends from the main React.Component class.

Next i replaced the form element with <ValidatorForm /> component. Then i replaced each input element with <TextInput /> passing in some props. The validators prop contain the validation rules. The errorMessages prop contain the error messages according to the validation rules.

In the TextInput.js we extracted some props like:

  • errorMessages: Represents an array of error messages supplied as a prop in Register component.
  • Validators: Represents the validation rules like required, isEmail, etc. look at react-form-validator-core for the available validation rules.
  • ValidatorListener: Triggered after each validation.

Then we displayed an input element like this:

The {…rest} expression automatically destructs props coming from the register component. so the input becomes:

In the errorText() function we called isValid which is provided from ValidatorComponent and returns the validation state. If the validation state is true then the form submit successfully, otherwise we show the error messages with getErrorMessage():

Now if you run the form and click submit the errors will appear at the bottom of each element.

 

Instant Validations

To allow for instant validations which appear when the user starts to type in the input field you have to use the instanteValidate prop in the ValidatorForm like shown:

 

Custom Validation Rules

You can add custom validation rules using ValidatorForm.addValidationRule() function: The function takes two arguments, the first is the rule name and the second is a callback function which returns a boolean value indicating that the validation succeed of failed.

 

 

Share this: