Form validations using React Hook Forms

Form validations are important for security and they make our web apps easier to use. Developers create forms all the time and we repeat the same patterns over and over in every project.

We also like to be efficient (make things easier on ourselves), and using some trusted 3rd party libraries is a great way to cut down on code and make it easier to read and work in.

Today I am going to implement a really useful library, React Hook Forms. This library uses a custom React hook to make adding validations a snap.

This demo assumes that you have a React project already created. For more information on how to create a React app, check out their docs or one of my previous blog posts that each starts with step-by-step instructions.

What are we building today?

We are going to create a form that takes a user’s name, email, and message. For this demo are going to add the following validations:

• name exists and is fewer than 20 characters long.
• email exists and is a valid email format.
• message exists.

This is what our form will look like when we are finished:

Create a Component

I’m going to call my component Contact.

Install and import React Hook Form

• In your terminal: npm install react-hook-form.
• Import useForm into your component.

Build a basic form

Assign useForm() to variables using deconstruction.

Assign useForm() to variables using deconstruction.

Assign onSubmit. This is a placeholder for now, we will update it in the next blog so the message is sent in an email.

Each <input> needs a unique name.

register is key to useForm. It allows the value to be available for both validation and submission.

We have a form now! Let’s add some validations.

Add Validations

useForm supports the following validations:

• required
• min
• max
• minLength
• pattern
• validate

Validations are added to eachregister. Check out the rules for validating here.

Here is a single-line version of an input (in case you find it easier to read).

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

Display Errors

To show that these validations work, let’s go back through and display the errors.

This is where we are going to use errors that we get from useForm. We are going to add some Javascript under each <input>.

• If you have one validation on an <input>, format the error by passing a string like this:

{errors.name && "Please enter a name"}

• If you have more than one validation, then add it like this:

{errors.name && errors.name.message}

and update the value of each validation so it includes two keys;value, and message like in the example below.

It’s easy as that! Here are the results:

Next week, we will send this message from your React app to your email using EmailJS. Stay tuned!

Check out some of my other stories; CSS Reset, or Recoil.js & simple global state. Contact me at joshuagauthreaux@gmail.com or through joshgotro.com.

Thank you for reading and be well!