How to Validate Email with Javascript

Validate an email with javascript : In this tutorial, we are going to see the different ways to validate an email address in javascript as well as all the options available to perform this validation.

Introduction

JavaScript is a programming language that is widely used in web development. When we create a website or an application in Javascript, it will often be necessary to create an HTML form to receive and collect the email addresses of these users. Without prior verification, users will be able to enter any strings even if they do not respect the naming conventions. It is therefore very important to validate the entry of the users’ email address before being able to store it in its database for example. Thanks to Javascript, we will be able to validate the form on the client-side so that the data processing is faster than the validation on the server-side.

An email is an ASCII character string separated into two parts by the @ symbol. The first part to the left of the @ symbol contains the user’s personal information (e.g. firstname.lastname). It can contain up to 64 characters. The second part to the right of the @ symbol contains the domain (e.g. gmail.com). It can contain a maximum of 253 characters.

Personal information may contain the following ASCII characters:

• English upper case (A-Z) and lower case (a-z) letters.
• Digits (0-9).
• Characters ! # $ % & ‘ * + – / = ? ^ _ ` { | } ~
• Character . (dot) the only conditions is that it is not at the beginning and end of string and that two dots cannot follow each other.

The part of the domain name can contain letters, digits, hyphens and dots.

We will see in this tutorial that there are several ways to verify that an email address is valid:

• By writing his own regular expression
• Using the NPM module
• Using an API like Mailgun or kickbox
• Validate the HTML field directly

Validate Email with Javascript

Email validation using the Regex Expression

The easiest way to check if an email address is valid is to use regular expressions. There are no universal regular expressions for verifying an email address. The majority of regular expressions found online are not robust even in the most basic cases. I advise you not to use them without testing them first.

Here is an example of regular expressions that can validate 99% of email addresses:

function validateEmail (email) {
  return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email)
}

Some examples that use the above function:

console.log(validateEmail('amira@data@yahoo.com')) #False
console.log(validateEmail('amirayahoo.com')) #False
console.log(validateEmail('amira@yahoo.com')) #True
console.log(validateEmail('amira@yahoo..com')) #False

Email validation using NPM Module

The npm module provides a more robust check to test whether an email address is correct or not. It handles cases that are difficult to test with regular expressions such as if the personal information is longer than 64 characters. This is a good alternative to regular expressions.

Here is an example of the use of this module :

var validator = require("email-validator");
 
validator.validate("test@test.com"); // true

Email validation using API

We saw earlier that regular expressions only test if the string is correct, but they don’t check if it actually exists. For this there are several APIs (such as Mailgun or Kickbox) that allow you to bypass this by performing an additional validation by querying the mail server.

Here’s how to proceed using the Kickbox API:

const email = 'test@test.com';
const apiKey = 'insert your key';

const res = await axios.get('https://api.kickbox.com/v2/verify', { params: { email, apiKey } });

res.data.result;

This method is not totally foolproof. Some email services block the use of tools such as KickBox and Mailgun to prevent email address scrapping.

Email validation using HTML field

The HTML5 language allows to use a new type of email field :

Email input

<input type="email" name="email" placeholder="Insert Your Email" />

Although this method looks interesting, it is not as powerful as using regular expressions. On top of that, its result will give different results depending on the browser implementation.

Conclusion

In this tutorial we have explored the different methods to validate an email address in Javascript. As you can see, it is not complicated to check if an email address is valid although understanding regular expression is not easy.

I hope this tutorial has interested you and don’t hesitate to tell me in comments if you have problems using one of these methods.

See you soon for more tutorials.

Back to Javascript menu