Validating React InputsWith React Hook Form

Validating inputs is very often required. For example, when you want to make sure two passwords inputs are the same, an email input should in fact be an email or that the input is not too long. This is can be easily done using React Hook From. In this article, I will show you how.

Required Fields

The most simple, yet very common, validation is to make sure that an input component contains input from the user. React Hook Form basic concept is to register input tags to the form by passing register() to the tag’s ref attribute. As we can see here:

<input name="input1" ref={register()}/>

In this simple example, we register the input to the form using the name input1. This way react hook form knows to observe changes of the input’s value.

Now, when we want to validate a required input, we simply add { required: true } to the ref register call.

<input name="input1" ref={register({required: true)}/>

The following is a working code example with basic “required” validation:

Basic validation example

How it works

1. Calling useForm at line 5 returns a register function to register inputs to the form, handleSubmit function which is used to publish the form and errors which is an object that contains all the errors in the form.
2. At line 16 we register the input to the form and mark it as required.
3. Before submitting the form, the react hook form validates that the user really typed something.
4. If the user did enter input, the onSubmit function at line 12 is called.
5. If the user didn’t enter any input then the onSubmit function won’t be called. Instead, the whole function will rerender and the errors object will hold the error.

Pressing enter when the input field is empty

Maximum Length

Getting the basic concept of the library might be a bit challenging but it is totally worth it. Once you understand the previous example, you can create many more validations using only small tweaks. Let’s see another validation example:

Making sure that the input is not too long

The trick is in line 17. When registering the input to the form we enter the maximum allowed length. Another cool feature here that you might notice, is that there is an error message in case the validation fails. This feature is useful when we have more than one validation, as we can see in the following section.

Multiple Validations

You can also write multiple validations for the same input. In the following example, we see 3 validations for the same input. The maxLentgh and the pattern validations are built in validations. The isEmail validation is a custom validation that I created using the js validator library.

Conclusion

The initial use might be a bit challenging but learning how to use the library is totally worth it. Especially if you are using onChange callbacks or refs to extract input values. Not only that the library gives you easy control over the form, it also provides you with great validation capabilities. Most basic validations can be accomplished using the built in validations. Yet, building your own custom validations is smooth and will fill the uncovered cases. Here is the official documentation. Give it a try!