Email Validation with React Hook Forms

What Are React Hooks?

Hooks are a way of tapping into React state and other features without having to write a class. Before Hooks, managing the local state in a React component required you to make the component a class. The component’s state was initialized via a call to the constructor(), and values in state could be accessed via this.state.

React Hooks instead allows you to write pure functional React components that are imbued with the power of state and lifecycle methods. Hooks improve code readability because you don’t have to write a lot of the boilerplate you used to have to write for class components. Not only that, Hooks reduces the risk of bugs due to context and scoping errors.

Why Use React Hook Form for Email Validation?

React Hook Form uses the power of React Hooks to build form components. Forms are notoriously painful to write because they require a lot of state management and boilerplate to set up. Using hooks greatly reduces the size and complexity of form components.

Setting Up React Hook Form

If you're not already familiar with React, check out the documentation before you begin this tutorial.

Create an App

Use Create React App to quickly spin up a new React app.

$ npx create-react-app react-hook-form-validation
$ cd react-hook-form-validation
$ npm start

Head to https://localhost:3000 to check out your basic React App running in the browser.

Create a Component

Create a new file called EmailInput.js next to App.js inside src. This is where we’ll render our input component and write the validation logic.

Create the basic functional component and return a <div> with some text inside it.

import React from "react";

const EmailInput = () => {

 return (

     


         
This is where we'll build the form

     

 );

};

export default EmailInput;

In App.js, remove all the boilerplate from between the two outermost <divs>. Import the new form component we just scaffolded and render that in the space you just cleared.

import './App.css';

import EmailInput from './EmailInput';



function App() {

 return (

   <div className="App">

     <EmailInput/>

   </div>

 );

}



export default App;

Go back to https://localhost:3000 and take a look at your newly rendered component.

Implementing Email Validation

Now we’re ready to add React Hook Form to our component. We’re going to use the useForm hook and the form and input components. These will give us access to all the methods we need to create our form.

import React from "react";

import { useForm, form, input } from "react-hook-form";



const EmailInput = () => {



 const { register, handleSubmit, formState: { errors } } = useForm();

 const onSubmit = data => console.log(data);



 console.log(errors);



    return (

     <div style={{marginTop: '2rem'}}>

           <form onSubmit={handleSubmit(onSubmit)}>

               <input type="tel" placeholder="Mobile number" 

             {...register("email", 

               {required: true})

             } 

         />

               <input type="submit" />

           </form>

       </div>

 );

};



export default EmailInput;

Calling the useForm() hook gives us access to the register function, handleSubmit, and formState (which includes an errors object.)

We’ll use handleSubmit to call our custom onSubmit function. In a production app, this function would send our data to the server. In this tutorial, it just logs the data to the console.

Register is where we apply validation rules. Inside the register function, we can assign a name to the input (email.) This becomes the field name in our data object inside the onSubmit function. The value will be the user’s email address.

const onSubmit = data => console.log(data); // data => {email: “value”}

We’ve also passed one basic validation rule to the register function: making the form field required. Later, we’ll add more form validation using the AbstractAPI endpoint.

Basic Email Validation Rules

There are many ways to validate an email address. The most basic is to do what we’ve already done: make the email address required and then surface an error if the input is empty. We could also set a minLength and maxLength for the email address or apply any of the other HTML attributes usually used for validation.

Custom Validation Rules

To do proper validation, however, we’ll need to pass our own validation rules. There are a number of ways to do this: we could write a regular expression to check that the email is a valid format, or use a validation library like email-validator to run checks on the given string.

However, neither of these methods is as robust as using an email validation API.

Email Validation APIs

An email validation API exposes a REST endpoint to which you can send a network request with a data object containing an email address for validation. The API performs a series of checks, including regex matching, MX record lookup, domain name validation, deliverability, and comparing the email against a list of known spam traps and blacklists. The API then returns a JSON object containing data about the validity of the email address.

Using AbstractAPI to Validate Emails

Let’s add email validation using the AbstractAPI Free Email Validation API.

Getting Started With the API

Navigate to the Email Validation API homepage, and click the blue “Get Started” button.

If you’ve never used AbstractAPI before, you’ll be asked to create a free account. Once you’ve done that, you’ll land on the API dashboard.

Copy your API key and create a variable for it in your EmailInput file. We’ll also grab the API URL and create a value for that too.

const apiKey = 'YOUR_API_KEY';

const apiURL = 'https://phonevalidation.abstractapi.com/v1/?api_key=' + apiKey;

Next, we’ll write the function to send the validation request to the endpoint.

Sending the Validation Request

Write a function called validateEmail inside your form component. We’ll use fetch and the async/await syntax to send the request to the validation API.

const validateEmail = async (email) => {

   const fullURL = apiURL + "&email=" + email;

   const validationResponse = await (await fetch(fullURL)).json();

   return validationResponse.valid;

}

AbstractAPI returns the following JSON response object:

{
    "email": "eric@abstractapi.com",
    "autocorrect": "",
    "deliverability": "DELIVERABLE",
    "quality_score": 0.80,
    "is_valid_format": true,
    "is_free_email": false
   "is_disposable_email": false
    "is_role_email": false
    "is_catchall_email": true
    "is_mx_found": true
    "is_smtp_valid": true
}

You could use any or all of these fields to determine whether the email is false, depending on the specific requirements of your app. For now, we’ll just use the is_valid_format field.

Using the Validated Response

Now we plug this function into our validation rules inside the register function. We’ll use the onBlue field to handle when the function is called. The onBlur field can be found on the options object and is called whenever the user navigates away from the input field. The function you pass to onBlur receives an event object. We can pull the email string out using event.target.value.

{...register("phoneNumber", {onBlur: (e) => validateEmail(e)})}

Now, when the user navigates away from the field, the validation function will be called and the email will be validated against the API. You should handle errors using the errors object and surface any meaningful errors to the user. They will be found under errors.email.

Best Practices

In order to get the most out of your email validation, there are a few best practices you should follow.

Surface Helpful Errors

Validation is useless if you don’t tell the user when their email is invalid and why. Tell them what went wrong and what they should do to fix it.

Use Multiple Validation Methods

You can use HTML5 attributes as your first line of defense for validation, and you can certainly roll your own regular expression to check the validity of the input string, but you shouldn’t rely on just one method or the other. Validation works best when there are several steps to the validation process - and a validation API is always the most robust and secure way to validate.

Back-Up Your Real-Time Validation With Regular Bulk Validation

If you are validating emails for a marketing list or campaign, be sure to periodically clean your email list to get rid of any invalid or undeliverable addresses that slipped through the cracks. Invalid email addresses increase bounce rates and harm sender reputation - plus they take up valuable space on your email list.

Conclusion

React Hook form is one of the most powerful UI libraries that takes the headache out of building ReactJS forms, and AbstractAPI is a robust email validation API that can handle checking whether incoming an email address is a valid email in real time on the frontend.

Try our React Hook forms in your next project - it’s free to use and the dev community is vibrant and available to answer questions.

FAQs

What is React Hook Form Email Validation?

React Hook Form Email Validation is a technique used in React applications to verify the correctness of email inputs. It leverages the React Hook Form library to create efficient, easy-to-manage forms with built-in validation methods, ensuring users enter valid email addresses.

How does React Hook Form improve email validation in React apps?

React Hook Form simplifies form handling in React apps, reducing the amount of code needed for form state management. For email validation, it provides custom validation hooks and integrates easily with APIs like AbstractAPI for advanced email verification, enhancing form accuracy and user experience.

Is React Hook Form Email Validation suitable for beginners in React?

Yes, React Hook Form is designed to be user-friendly and is suitable for both beginners and experienced developers. Its straightforward implementation and comprehensive documentation make it an ideal choice for those new to React or form validation.

Can React Hook Form be used with TypeScript for email validation?

Absolutely. React Hook Form is fully compatible with TypeScript, offering type-safe forms. This means you can leverage TypeScript's features to ensure even more reliable and maintainable email validation in your React applications.

Are there any costs associated with using React Hook Form for email validation?

React Hook Form itself is an open-source library and free to use. However, if integrating with third-party APIs like AbstractAPI for advanced email validation, there may be costs depending on the API's pricing model. It's important to check the specific API's pricing structure for any associated costs.

‍