JavaScript Email Validator

In this article, you will learn how to validate an email address using Javascript. Whenever you ask the user to enter an email address in a web form, it’s essential to validate that email and make sure it falls into the accepted email address patterns.

An invalid email address entered in a registration form or newsletter subscription will cause issues to the site owner and the user. Thus, having a client-side check before the user can proceed helps eliminate the hassle of having a wrong email id in the database.

Email Address Characteristics

An email address always starts with a username, personal information, or user ID, which is before the @ sign. The domain name of the email comes after the @ sign.

For the same of this tutorial, let’s use the email format below:
[adinserter block=”2″] For an email address to be valid, it must:

  • has a username no longer than 64 characters
  • has a domain name no longer than 253 characters
  • has a username that does not start or end with a . dot

Moreover, an email can contains upper case (A-Z) and lower case (a-z) Latin letters, digits( 0-9), and character ( ! # $ % & ‘ * + – / = ? ^ _ ` { | } ~)

Example of a valid email address


Example of an invalid email address

There are too many cases where an email address is invalid. For example:

  • (double dots are not allowed)
  • (the domain name cannot start with a dot .)
  • ( missing username)
  • (username cannot begin with “.” )
  • (missing the @ symbol)

Javascript email validator function

Without any delay, let’s get to the Javascript email validator function:
[adinserter block=”2″]

function ValidateEmail(email) {

    var validEmailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

    if (email.value.match(validEmailRegex)) {

        return true;

    } else {

        alert("Invalid email address!");

        return false;


And the HTML form:

<!DOCTYPE html>

<html lang="en">


    <meta charset="utf-8" />
    <title>JavaScript Email Validation</title>
            margin: auto;
            padding-top: 5px;
            padding-bottom: 5px;
            padding-left: 10px;
            background: blue;
            border: 1px soild silver;

        .email h2 {
            color: white;

        input {
            font-size: 18pt;

        input:focus {
            background-color: lightgray;

        input validate {
            font-size: 12pt;

    <div class="email">
        <h2>Input an email address</h2>
        <form name="frm">
            <input type="text" name="txtEmail" id="txtEmail" />
            <input type="submit" name="validate" value="Validate" onclick="ValidateEmail(txtEmail)" />


Once you run the code, you should get a Javascript alert if the email you entered is invalid. Happy Coding!