How to Do Email Validation in JavaScript

Email validation determines the validity of an email address. If an email is valid, it’s real, in use, and can be used for your email marketing campaigns. If it’s invalid, it doesn’t exist or uses an invalid email format.

Validating emails is critical for keeping your email bounce ratesⓘThe percentage of emails that are undelivered vs. delivered to the intended recipient. low and maximizing your conversions. Some practical applications for JavaScript email validation include

• Landing page registration forms
• Newsletter signups
• Account registration
• eCommerce transactions

Implementing a simple Javascript email verification code on these pages can be the difference between bouncing an email and making a sale.

Why validate emails with JavaScript?

JavaScript is a widely used programming language and for great reason.

• It’s easy to use and implement
• It’s agile, allowing you to validate emails swiftly
• It provides minimal strain and load to a webpage
• It won’t cause any slowdown or negatively impact load times

Plus, it’s a prevalent language, making it easily compatible with most websites and platforms. You’ll find no shortage of guides and tutorials to assist you as you progress through the world of creating your own JavaScript email validation tool.

Understanding email format

Without something like a JavaScript email verifier to check email format, anyone can enter any characters they want on your site.

But why does that matter?

Proper email format is one of the significant distinguishers between a valid and invalid email address. An email that uses improper syntax will never be valid. And without email format validation, any visitor can enter any sequence of characters to get past your registration form.

What is the structure of a valid email address?

A valid email address will always consist of two major components:

• The username
• The email domain name

Both of these parts must be separated by the @ symbol. Here’s an example of a valid email address that uses the proper syntax:

john@zerobounce.net

In this example, ‘John’ is the username, and ‘zerobounce.net’ is the entire domain name. You can actually break down the domain name into two further parts: the domain name (in this example, zerobounce) and the top-level domain (.net, .com, .edu, etc.).

Be aware that some special characters are permitted for use in the username portion of an email address. The most commonly accepted special characters include numbers, periods, dashes, or underscores. However, additional characters are permitted, including:

There are also special rules for certain characters. For example, periods are frequently used in email addresses (i.e., john.smith@domain.com), but the period may not begin or end the username.

To make it more complex, not all characters are accepted by all mail providers. A user may create a valid email using their email provider but have difficulty using that address to register in other locations if the site owner’s regular expression (regex) for email pattern checks does not include those particular characters.

Finally - email addresses may also have a subdomain if applicable. In these instances, you would distinguish the subdomain from the root domain by adding a period between the two (i.e., john@sales.example.com).

Importance of correct email format

“So I occasionally receive some junk data - so what?”

Any invalid email address on your list will lead to a bounce. A high email bounce rate will quickly become more than just an inconvenience.

Every company has something called a sender reputation, aka sender scoreⓘOften used interchangeably with Sender Reputation. It is a score used by internet service providers to communicate your reputation with others based on your historical email-sending habits and behaviors.. Internet service providers (ISPs) issue this sender score on a 100-point scale, with 100 being the best score possible and 0 being the lowest.

“Why does sender reputation matter?”

Your sender score is a reflection of your company/domain’s email-sending behaviors. Attributes like a high email bounce rate, poor open and click rates, or high spam complaint rate will lower your score.

A low score means that ISPs question your legitimacy and distrust your email content. Your emails will begin to go to the spam folder with frequency. Your emails may also be blocked outright.

In some cases, poor email marketing practices such as these can prompt email service providers to suspend your account.

Implementing JavaScript email verification to check email format and patterns is a necessity for keeping your company in good standing.

Implementing basic email validation using JavaScript

To get started with email validation in JavaScript, you first need a regular expression (regex) pattern.

What is a regular expression?

A regular expression is a string of text used to search for and match patterns expressed in that string.

Here’s a simple regex example that we used in our front-end email validation tool above:

Then, you can incorporate this regex for email validation into some basic JavaScript:

Note that this example uses the JavaScript regex test() method.

A JavaScript regex for email verification using the test() method identifies valid email address patterns by matching them with the characters allowed in the text string. The email format must be correct in order for the script to identify the address as valid. If the email address format breaks the rules found in the regex, it will be classified as invalid.

Alternative basic email validation methods using JavaScript

It’s vital to remember that this front-end email validation method with JavaScript is merely a pattern check.

Below are some more advanced email validation methods you should consider in addition to your JavaScript application.

Use a pre-existing JavaScript library

• validator.js
• validate.js

These libraries offer a more complex series of patterns and checks. The script allows you to detect a wide range of variables, including character type or if those characters match a predefined pattern (email, phone number, postal code, ISBN, etc.).

Examples:

These validators allow you to account for a variety of variables, such as determining the casing of the characters, checking for numbers, or allowing/disallowing based on a custom whitelist or blacklist.

You can find a full list of advanced validators and options by downloading the file from the links above or using a repository like Github.

Email validation JavaScript libraries include all of this, as well as unique error codes to spare you the legwork of creating the patterns and syntax yourself.

SMTP checkⓘSimple Mail Transfer Protocol check. This is a relay process that determines if a mail server possesses the necessary DNS records to send and receive emails. SMTP checks also measure response times. or mailbox pinging

Simple Mail Transfer Protocol (SMTP) is the internet’s primary method of sending and receiving emails.

SMTP begins with the sending server sending an initial request, also known as an EHLO (Extended Hello) command. Once the sender confirms the identity of the receiving server, the emailing process continues.

We can leverage this mail server pinging to assist with email validation. By making a quick call to the domain described in an email address, we can confirm if the email domain exists or is in use.

You’ll need to connect with an external email validation service for this type of check via an API.

DNS lookups

Even with the proper syntax and an existing email domain, an email address can’t be considered validated.

A domain needs to have a Mail Exchange (MX) record in its DNS entries to receive incoming mail. Not all email addresses are created to receive messages, only to send them.

Completing a DNS lookup during your email validation process is another necessary way to ensure that the email address is usable for campaigns and won’t result in a bounce or error.

Similar to SMTP checks, you’ll need some outside help for a DNS lookup.

Best practices for JavaScript email validation

Cleaning up incoming email addresses using JavaScript isn’t just crucial for your performance; it’s a vital defense against spammy, harmful data.

When implementing a tool like this on your site or platform, be sure to use these best practices for ongoing security.

Apply JavaScript email validation to any data entry forms

For any web or platform page you have that contains a data entry form (names, emails, phone numbers, etc.), consider adding JavaScript email verification.

Even in its most basic form, the script will autodetect malformed entries and block out any data that are not appropriate for the field. Not only does this help you block invalid information, but it will provide a better user experience by giving immediate error feedback to the user. In most cases, visitors simply make mistakes during data entry and need to know what went wrong.

Take advantage of sanitizers from JavaScript libraries

When using a library like validator.js, you’ll have quick access to Sanitizers.

These provide you with a variety of ways to eliminate or replace unwanted characters from a given entry. Some examples include:

• blacklist - Allows you to create a list of characters to block. If these characters appear in an email address entry, they’re automatically removed.
• normalizeEmail - Automatically updates an entry to comply with the rules for different mail providers. You can account for case sensitivity and how to handle sub-address indicated by a + symbol.
• whitelist - The opposite of a blacklist; you can create a list of allowed characters and block any that are not on your whitelist.

Sites without any form of character entry sanitization are vulnerable to attacks. Hackers know how to manipulate these vulnerabilities and enter strings that effectively create an unauthorized doorway into your platform. This type of vulnerability leaves both your personal information and your customers at risk.

Use clear error messages

While it’s important to block potentially harmful entries, it’s also vital to let users know why the error occurs. This information will aid visitors in correcting common mistakes so that they can provide you with their valid email addresses.

Of course - “Please enter a valid email address” is a fine start. But the more descriptive you can be, the better.

• "Email address doesn’t contain an @ symbol"
• "Invalid username format"
• "Invalid email domain"

The goal is to get information from your visitors - not block it. Helping them provide the right information will help both parties get to their destination.

Test new emails even if they get past validation

Even if an email address matches your regex pattern, there’s no guarantee it’s valid. Even a misspelled entry will likely still result in an email with the appropriate syntax.

For example, John wants to enter his email address “john@gmail.com,” but instead submits “j0hn@gmail.com.” According to your JavaScript email pattern check, this is a valid email as all of these characters are permitted. But, since it does not perform a more advanced technique on its own like an SMTP check or DNS lookup, you won’t know it’s invalid.

You can send a direct email to the address. However, an invalid email address will result in a bounce. As we learned above, the higher your bounce rate, the more problems you’ll have with email deliverabilityⓘA sender’s ability to reach the recipient’s inbox with their outgoing emails. It may also describe the ratio of emails delivered to the inbox vs. those sent to spam or blocked by the receiving server..

The drawbacks of JavaScript email validation

While handy, there are several drawbacks to JavaScript email validation:

• A regex pattern check only checks for allowed/disallowed characters. It doesn’t verify the email domain.
• Completing SMTP checks or DNS lookups isn’t possible with JavaScript alone.
• SMTP and DNS checks are resource-intensive - too much so for a typical server.

The first presents a significant issue as much more than improper syntax can make an email address invalid. For example, the email address “example@exampledomain4321.com” might use an accepted pattern, but it’s not an actual address that’s in use. But you have no way to confirm this without additional Simple Mail Transfer Protocol (SMTP checks) and domain verification.

Your email validation tool must be able to ping the domain to determine if the username is authentic and belongs to someone on that domain. Liken the SMTP check to dialing a number, hearing the ring, and hanging up before the connection is made. You know that the destination exists, but no actual message is sent.

Once a connection is made, you need to be able to check the DNS entries for a proper MX record. However, JavaScript alone will not be able to provide this during your email validation process. You’ll need to supplement your script with an external service capable of executing this process for you.

Finally - even if you’re able to set all of these advanced email validation techniques up in tandem with your JavaScript, the entire process is too demanding for an everyday server.

It’s not much to validate a few emails. But, once you experience a high traffic volume and need to validate in bulk, you’ll experience a noticeable performance impact, if not a server failure altogether. This may result in website outages and a poor user experience for your visitors.