How to Validate Email Addresses from Inputs in React.js

How can we validate email addresses from inputs in React.js?

We’ll be using the validator module.

1. Install validator

Let’s install validator using npm.

npm install validator

2. Create utility function to validate email

Let’s create a simple utility function to validate the email address.

import validator from 'validator';
const validateEmail = email => {
  return validator.isEmail(email) && email.length > 0;
}

3. Validate when email changes

Finally, we’ll call our validateEmail() function when the email string changes.

Depending on where we store the utility function, we may have to import it from another file.

Let’s place this inside a useEffect hook that runs conditionally on email.

export default function SomeComponent() {
  const [email, setEmail] = useState("");
  const [emailValid, setEmailValid] = useState(true);
  
  useEffect(() => {
    setEmailValid(validateEmail(email));
  }, [email])

  return (
    <input
      value={email}
      onChange={e => setEmail(e.target.value)}
    />
  )
}

We can then use the emailValid boolean state to conditionally render an error message to the user.