5 Ways to Implement Email Validation in React Hook Form

Proper email validation in React Hook Form is vital for maintaining clean data and a smooth user experience. You'll find five distinct methods for setting it up, each with code examples. We'll also cover the drawbacks of these approaches and demonstrate how Abstract API provides a more robust solution.

How to Implement Email Validation in React Hook Form

This section details four different ways to set up email validation in React Hook Form. Each method includes a description of its function and a corresponding code example.

HTML5 Native Constraint Validation

React Hook Form can delegate the validation process to the browser. To do this, you enable the "shouldUseNativeValidation" option when you initialize the form with the "useForm" hook, as shown in the React Hook Form docs.

You must also keep the input element’s "type" attribute as "email" and include the "required" attribute. The browser then performs the validation, focuses on the first invalid field, and provides the error message.

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 Pattern Rule

You can attach a "pattern" object directly to the input field's registration. React Hook Form incorporates this pattern into its standard validation pipeline alongside other rules you define, a method discussed in a Stack Overflow question.

A well-defined regular expression, combined with a custom error message, is sufficient for most common validation scenarios according to a dev.to article.

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 more complex validation logic, you can supply a custom function to the "validate" property. This is useful for non-trivial checks like MX record lookups or checks against a blocklist of disposable domains, a technique covered in an Abstract API guide.

React Hook Form interprets any truthy return value from the function, or a resolved Promise, as a successful validation. If the function returns a string, it is used as 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    // string → error message
    }
  })}
/>

Schema-Based Validation with a Resolver

This approach moves the validation rules outside of the UI component. A schema library, such as Yup or Zod, defines the data shape and rules, and a resolver connects it to React Hook Form.

This method helps keep the component code lean. It also supports complex data transformations and allows you to reuse the same validation schema on your server, as demonstrated on Jason Watmore's blog.

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 in React Hook Form

While these methods are functional, they introduce several significant problems that can compromise data quality and create inconsistent user experiences across different browsers.

• Regular expressions and native HTML5 validation cannot perfectly parse RFC 5322 grammar. This forces a choice between false positives that accept invalid emails and false negatives that block valid ones, especially with edge cases.
• Native HTML5 validation delegates control to the browser. Since each browser implements different patterns and error reports, this approach creates inconsistent behavior. A form may validate in one browser but fail in another.
• All four methods operate on the client side, so a user can bypass them. They only confirm syntax, not deliverability. An email that passes validation can still bounce because the check does not verify mailbox existence.
• The regex pattern rule can fail silently. If a pattern from a JSON string fails to convert to a RegExp object, React Hook Form ignores the rule, which creates a false sense of security.