October 1, 2021

How to Validate Email Address in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to validate email address in javascript. Email validation is a very important part of web development because you don’t want to store users in your database with invalid email addresses.

Valid email plays an important role in sending important notifications or any user account-specific updates such as change in username, change in password, account deactivation, etc.

An email consists of 3 parts. The first part can have random text, numbers, or special symbols such as underscores, dots, etc. The second and third part includes @ symbol and a domain name respectively.

I wish email validation should have been straightforward but it is not. If you just do a basic search on google regarding email validation, you will find tons of solutions but every solution is not effective.

Most of the solutions are focused on the regex approach where they will provide you regex string to validate the email address. There are also a bunch of libraries to perform such validation.

I have also found one library email-validator which will help us in accomplishing our goal. Please copy the code given below, paste it in the javascript file and save it as email.js

In the following example, we will enter a random email in the input field. Upon click of a button, we will check if the format of the email is valid or not. Depending upon the result of the check, we will display valid or invalid on the screen. Please have a look over the code example and the steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, input, and button).
The div element with a class of container is just a wrapper for the input and button elements.
The innerText for the button element is “Check”.
By default, the innerText for the result div element is “None” but we will update it dynamically using javascript.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have included the email.js file using script tag which will help us in the email validation process.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <div class="container">
        <input type="text">
        <button>Check</button>
    </div>
    <div id="result">None</div>
    
    <script src="email.js"></script>
    <script src="script.js"></script>
</body>
</html>

.container {
    text-align: center;
    margin-bottom: 20px;
}

#result {
    text-align: center;
    border: 1px solid black;
    height: 15px;
    width: 225px;
    color: #fff;
    margin: auto;
    padding: 5px;
    background-color: black;
}

Javascript

We have selected the button element, input element, and result div element using the document.querySelector() method and stored them in the btn, input, and result variables respectively.
We have attached the click event listener to the button element.
In the event handler function, we are getting the value of the input element using value property and storing it in the email variable.
We are calling the validateEmail() method and passing email variable as a parameter. This method is part of our email.js file. This method will return a Boolean value and we are storing it in the isValid variable.
We are using if statement to execute a certain piece of code depending upon the boolean value.
If the email is valid, we will change the background color of the result div element to green and display “Valid” as innerText.
If the email is invalid, we will change the background color of the result div element to red and display “Invalid” as innerText.

Email.js

var tester = /^[-!#$%&'*+\/0-9=?A-Z^_a-z{|}~](\.?[-!#$%&'*+\/0-9=?A-Z^_a-z`{|}~])*@[a-zA-Z0-9](-*\.?[a-zA-Z0-9])*\.[a-zA-Z](-?[a-zA-Z0-9])+$/;

function validateEmail(email)
{
    if (!email)
        return false;
        
    if(email.length>254)
        return false;

    var valid = tester.test(email);
    if(!valid)
        return false;

    // Further checking of some things regex can't handle
    var parts = email.split("@");
    if(parts[0].length>64)
        return false;

    var domainParts = parts[1].split(".");
    if(domainParts.some(function(part) { return part.length>63; }))
        return false;

    return true;
}

Script.js

let btn = document.querySelector('button');
let input = document.querySelector('input');
let result = document.querySelector('#result');

btn.addEventListener('click', () => {
    let email = input.value;
    let isValid = validateEmail(email);

    if(isValid){
        result.style.background = 'green';
        result.innerText = 'Valid';
    }else {
        result.style.background = 'red';
        result.innerText = 'Invalid';
    }
})

You May Also Like: