Proper email validation is a key part of building reliable forms in React Hook Form. We'll walk through five different implementation methods, each with working code snippets. We will also cover the common pitfalls of these traditional approaches and show how Abstract API helps overcome them.
How to Implement Email Validation in React Hook Form
Here are four ways to add email validation to your forms. Each method uses a different feature of the library, from native browser checks to external schema validation.
HTML5 Native Constraint
React Hook Form can delegate the validation to the browser. You enable this with the `shouldUseNativeValidation` option when you create the form. Keep the input element’s `type="email"` and `required` attributes.
The browser performs a check based on RFC-5322 standards. It automatically focuses the first invalid field and returns a `ValidityState` object. React Hook Form then passes the error message forward for display.
const {register, handleSubmit} = useForm({mode: 'onBlur', shouldUseNativeValidation: true})
<form noValidate onSubmit={handleSubmit(onSubmit)}>
<input type="email" required {...register('email')}/>
<button>Submit</button>
</form>
Regular Expression Rule
You can attach a pattern object directly to the field's registration. React Hook Form compiles this pattern into the same validation pipeline it uses for all other rules.
A well-defined regular expression, combined with a custom error message, is sufficient for most use cases.
const {register, formState:{errors}} = useForm()
<input
{...register('email', {
required: 'email is mandatory',
pattern: {value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, message: 'invalid'}
})}
/>
{errors.email?.message}
Custom Validator Function
For complex rule sets, like MX record lookups or disposable domain checks, you can pass a function to the `validate` property. React Hook Form treats any truthy return value as a success.
For asynchronous checks, it considers a resolved Promise as a successful validation. If the function returns a string or the Promise resolves to a string, that string becomes the error message.
const {register} = useForm({mode:'onChange'})
<input
{...register('email', {
validate: async value => {
const res = await fetch('/api/validate-email?e=' + encodeURIComponent(value))
const {ok, reason} = await res.json()
return ok || reason
}
})}
/>
Schema-Based Validation
This approach moves validation rules out of the component and into a separate schema engine like Yup or Zod. This practice keeps the component code lean and focused on presentation.
It also allows you to reuse the same validation schema on the server for consistency. The schema is connected to the form through a resolver.
import * as Yup from 'yup'
const schema = Yup.object({email: Yup.string().required().email()})
const {register, formState:{errors}} = useForm({resolver: yupResolver(schema)})
<input {...register('email')}/> {errors.email?.message}
Challenges of Email Validation
These traditional methods come with significant drawbacks that can compromise form reliability and data quality. The approaches have inherent limitations that developers must navigate.
- Regular expressions and native type="email" checks cannot fully parse RFC 5322 grammar. This limitation, which affects pattern and schema-based rules, creates false positives or negatives for edge cases like comments or quoted local parts.
- The HTML5 native constraint method creates cross-browser inconsistencies. Each browser uses its own validation pattern and error report, which causes unpredictable callback behavior and varied error messages.
- All four methods operate on the client side and a user can bypass them. They only perform syntax validation and do not check for deliverability or mailbox existence, so an address can still bounce.
- The pattern option can fail silently. If a regex arrives as a string from JSON and fails to convert, React Hook Form ignores the rule. This creates a false sense of security until a failure in production.
Validate Emails with Abstract API
Validate user emails to improve data quality and ensure your messages reach the inbox.
Get started for free
How Abstract API Handles Email Validation in React Hook Form
Abstract API addresses the core weaknesses of traditional methods. It uses a remote service to perform comprehensive, server-side checks that go beyond simple pattern matches.
- It pushes validation to a remote service that performs syntax analysis, typo correction, and real-time MX and SMTP checks.
- The service detects if an email is disposable, role-based, or a catch-all address, and provides a quantitative quality score.
- It defers the expensive network and DNS work to its own endpoint, which keeps the React Hook Form implementation lightweight.
- The API response gives you deliverability certainty, which you can use to call setError or gate form submission.
- These server-side signals confirm if an address can actually receive mail, something a client-side check cannot do.
How to Add Abstract API to Your Dev Environment
Once you know Abstract’s capabilities, you can add its email validation API to your project with ease.
- Sign up at Abstract API, create an Email Verification API instance, and copy your API key.
- Install the necessary packages for your React project.
npm install react-hook-form axios
- Add your key to a .env file as REACT_APP_ABSTRACT_EMAIL_KEY and restart the server.
- Create a utility function, like utils/validateEmail.js, to construct the API request URL.
- In your form component, import and call this function inside the handleSubmit logic.
- Use the API response to gate form submission or call the setError function.
Sample Email Validation Implementation with Abstract API
The code below shows how to integrate Abstract API with React Hook Form. First, it defines an async function, validateEmail, that sends the user's input to the Abstract API endpoint. The main component, Signup, uses the useForm hook. When a user submits the form, the onSubmit function calls validateEmail. It then checks the API response for deliverability and disposable status. If the email is undeliverable or from a temporary service, it uses setError to display a message to the user. Otherwise, the signup process can continue.
import { useForm } from 'react-hook-form';
import axios from 'axios';
const key = import.meta.env.VITE_ABSTRACT_KEY;
async function validateEmail(email) {
const url = `https://emailvalidation.abstractapi.com/v1/?api_key=${key}&email=${encodeURIComponent(email)}`;
const { data } = await axios.get(url);
return data;
}
export default function Signup() {
const { register, handleSubmit, setError } = useForm();
const onSubmit = async ({ email }) => {
const res = await validateEmail(email);
if (res.deliverability !== 'DELIVERABLE' || res.is_disposable_email.value) {
return setError('email', { type: 'server', message: 'Undeliverable or disposable' });
}
// continue with createUser(...)
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('email', { required: true, pattern: /^\S+@\S+\.\S+$/ })} />
<button type="submit">Sign up</button>
</form>
);
}
A successful API call returns a detailed JSON object. Key fields include deliverability, which confirms if an address accepts mail, and quality_score, which estimates bounce risk. The boolean fields, like is_disposable_email, expose potential risks so you can manage submissions with more control.
{
"email": "johnsmith@gmail.com",
"autocorrect": "",
"deliverability": "DELIVERABLE",
"quality_score": 0.9,
"is_valid_format": { "value": true, "text": "TRUE" },
"is_free_email": { "value": true, "text": "TRUE" },
"is_disposable_email": { "value": false, "text": "FALSE" },
"is_role_email": { "value": false, "text": "FALSE" },
"is_mx_found": { "value": true, "text": "TRUE" },
"is_smtp_valid": { "value": true, "text": "TRUE" }
}
Final Thoughts
Traditional client-side validation cannot confirm if an email address actually exists or accepts mail. This creates gaps where invalid or risky addresses pass through. Abstract API closes these gaps with real-time, server-side checks for deliverability. To reliably validate user emails, create a free account on Abstract API and get your API key.
Validate Emails with Abstract API
Stop bad emails at the source by adding effective, real-time email validation to your forms.
Get started for free
