Form Validation in React

If you've ever used the AngularJS framework, then you know how easily forms are validated in it. However, in React, the situation is slightly worse. It is understandable, because it is just a library. But thanks to the community, this library can make a powerful tool for creating full-fledged SPA applications. At the moment, a huge number of components have been created that can satisfy most of the needs of developers on React. In this article, I would like to describe the approach that I used to validate forms using the Formsy-react component .

To begin with, there are a lot of components for form validation ( heresubmitted 32). I tried some of them and decided to focus on Formsy, since it did not look too sophisticated and at the same time quite flexible. I will show the principle of work on the example of the login form. In order not to bother with styles, we will use react-bootstrap.

In the test application, login is possible in 3 ways: by login, email or phone number. Accordingly, each type of login needs its own specific validations. For simplicity of example, I will show only a component with a login form, a link to the project repository you can find at the end of the article.

So, we have the Login component, which is responsible for our form. It has 3 different login methods; accordingly, it would be convenient to display them using the tabs:

Source code for tabs with input fields
LoginPasswordEmailPasswordPhonePassword


Each tab is a form, inside which there are 2 fields and a button to send the form.

Let's start in order, with the Formsy.Form component. In it we are interested in 3 properties (props): onValidSubmit, onValid, onInvalid.

The onValidSubmit property is responsible for submitting the form. If all the data is entered correctly and the user clicks the login button, then this.handleLogin function is called, which sends the data to the server. This function must have one parameter that will contain the object. This object stores field names and their values.

The onValid and onInvalid properties are responsible for the state of the submit button. They should transfer a function that will turn the button on or off, depending on the correctness of the entered data.

Next, we have fields that need to be checked for the validity of the entered data. For the normal functioning of this component, we need to create our own component for data input (TextInput). On the Formsy website, you can find a ready-made component that includes everything you need and requires a minimum of changes before use. It is necessary to transfer to our component all the standard properties for the input tag, such as type, etc., as well as several special properties that will help with component validation.

The first such property is name. When the user clicks on the send data button, you can easily get the desired input by name, as well as its value.

You must also specify the validations property. An object is expected in this property. The Formsy component already has some validations, for example, minLength, which I used in the login field. It’s easy to guess that with this check we can set the minimum number of characters entered. There are many other built-in validations, for example, to check the correctness of email addresses, phone numbers and others. However, this component would not be so good if you could not create your own verification functions. And it is possible!

For example, in the email field, I announced my own verification that the person enters the email address registered on gmail.com. The check function is as follows:

Verification function source code
function isGoogleEmail(values, value) {
  if (typeof value !== 'undefined' && value.indexOf('gmail.com') === -1) {
    return false;
  }
  return true;
}


The function takes in 2 parameters: all fields of the form and the current field that is being tested. The first parameter contains an array of all the fields and their values ​​that are present in the form. The second parameter value contains the contents of the current field. Inside the function, it is necessary to check whether value exists, as well as to make any other checks. If the function returns false, then the verification failed and the user will not be able to submit the form. Otherwise, everything is OK, this field has passed the test and does not contain errors

The second property that we must pass to the input field is validationErrors. The beauty of this property is that for each error it will give out its message. Thus, it is possible to hang different checks on one field (for example, the number of entered characters, the presence of at least one special character, etc.) and for each of these checks produce its own error (rather than writing in one message that the field should contain at least 8 characters, 2 digits, 3 letters, etc.). This approach is used in the phone input field, where at first a “super reliable check” takes place to verify that the entered text is really a phone, and then it is checked to see if there is a '+' at the beginning.

Thus, this component helps a lot with form validation, which is so lacking in React. You can look at the full code of this example in this repository , and also do not forget to look into the Formsy repository, there is still a lot of interesting things. Hope this article helps you in creating your application.

Thanks for attention!

Also popular now: