JavaScript

JavaScript Email Validator

By Asha S.Posted on
Time to Read:-words

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:

username@domain.com
[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

  • username@mysite.com
  • user.name@mysite.com
  • username@my.site.com

Example of an invalid email address

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

  • username..1234@mysite.com (double dots are not allowed)
  • username@.mysite.com (the domain name cannot start with a dot .)
  • @my.site.com ( missing username)
  • .username@mysite.com (username cannot begin with “.” )
  • username.mysite.com (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">

<head>

    <meta charset="utf-8" />
    <title>JavaScript Email Validation</title>
    <style>
        .email{
            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;
        }
    </style>
</head>

<body>
    <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)" />
        </form>
    </div>
</body>

</html>

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

Post Views: 286