5 Ways to Implement Email Validation in React

Proper email validation is a fundamental part of any React application that collects user data. You'll find five distinct methods for implementation, each with code snippets. We'll also look at the shortcomings of these traditional approaches and how Abstract API provides a more robust solution.

How to Implement Email Validation in React

Here are four common methods to validate email addresses in a React application. Each approach has a distinct implementation, from browser-native features to external libraries.

Browser Constraint-Validation

This method leverages built-in HTML5 features. When you render an input with "type='email'", React passes this attribute directly to the DOM, which provides browser-supplied pattern validation for free. The code uses a "useRef" hook to get a direct reference to the input element.

The "handleSubmit" function calls "reportValidity()" on the input. This function triggers the browser's built-in validation UI and returns true if the input is valid. This approach works even before the React application fully loads, an example of progressive enhancement, and adds no extra size to your code bundle.

import { useRef } from 'react';

function EmailField() {
  const inputRef = useRef(null);

  function handleSubmit(e) {
    e.preventDefault();
    if (inputRef.current.reportValidity()) {
      // at this point inputRef.current.value is syntactically valid
    }
  }

  return (
    <form onSubmit={handleSubmit} noValidate>
      <input ref={inputRef} type="email" required />
      <button>Save</button>
    </form>
  );
}

Hand-Rolled Regex in the Component

This technique defines a custom regular expression inside your component to check the email format. The state of the input field and any potential error message are managed with the "useState" hook. A constant, "EMAIL_RE", holds the regex pattern.

Validation logic executes on the "onBlur" event, which fires when the user navigates away from the input field. The "test()" method of the regex evaluates the email string. If the string fails the test, an error message is set and displayed. Otherwise, the error state is null. The pattern used is a common one found in many React tutorials.

import { useState } from 'react';

const EMAIL_RE = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;

function InlineRegex() {
  const [email, setEmail]   = useState('');
  const [error, setError]   = useState(null);

  function onBlur() {
    setError(EMAIL_RE.test(email) ? null : 'Invalid e-mail');
  }

  return (
    <>
      <input value={email} onChange={e => setEmail(e.target.value)}
             onBlur={onBlur} />
      {error && <span>{error}</span>}
    </>
  );
}

React-Hook-Form with a Pattern Rule

The "react-hook-form" library offers a declarative way to handle form validation. The "useForm" hook provides a "register" function to connect inputs to the form state and a "formState" object that contains any validation errors. You pass validation rules, such as "required" and "pattern", to the "register" function.

The "pattern" rule accepts a regular expression and a custom error message. A key benefit of this library is its performance. It validates only the fields that change, which avoids unnecessary renders. Errors are accessible through the "errors" object and can be conditionally displayed.

import { useForm } from 'react-hook-form';

function HookForm() {
  const { register, handleSubmit, formState:{ errors } } = useForm();
  return (
    <form onSubmit={handleSubmit(console.log)}>
      <input
        {...register('email', {
          required: 'E-mail is required',
          pattern : {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: 'Invalid e-mail'
          }
        })}
      />
      {errors.email?.message}
      <button>Go</button>
    </form>
  );
}

External Validation Library

Another option is to use a dedicated validation library like "validator.js". These libraries abstract away the complexity of regex patterns by providing simple functions. For example, "validator.js" has an "isEmail()" function that checks if a string conforms to the standard email format.

As some guides show, you first install the package with 'npm install validator'. Then, you can import and use the "isEmail" function directly in your event handlers, such as "onChange". The function returns a boolean, which you can use to conditionally set and display a validation message.

import validator from 'validator';
import { useState } from 'react';

function ValidatorLib() {
  const [msg, setMsg] = useState('');
  return (
    <>
      <input onChange={e =>
        setMsg(validator.isEmail(e.target.value)
               ? '✓'
               : 'Enter a valid e-mail')
      } />
      <span>{msg}</span>
    </>
  );
}

Challenges of Email Validation in React

While the methods above seem straightforward, they introduce significant hurdles. These approaches often fall short of comprehensive verification and create complexities for both developers and end-users.

• A regex that fully complies with email standards is extremely complex and hard to maintain. Simpler patterns, like those in hand-rolled or hook-form solutions, often reject valid emails or accept invalid ones, which creates a poor user experience.
• Browser constraint-validation via type="email" is unreliable. The HTML5 specification is loose, so different browsers validate addresses inconsistently. This leads to unpredictable behavior and error messages that you cannot easily control or style.
• React's asynchronous state updates complicate validation logic. `setState` batches changes, so handlers might read stale input values. This can cause validation to pass on the client but fail on the server, which creates hard-to-debug edge cases.
• All front-end methods, from regex to external libraries, only check syntax. They cannot confirm if an email address actually exists or can receive mail. True deliverability verification requires network calls to check DNS and SMTP records from a server.