Email Validation in JavaScript

Email Validation in JavaScript

Email validation is a very important point while validating an HTML form. In this page we have discussed how to email validate using.
Email validation in JavaScript is an important part of the user experience of a web application. Validation assists in inputting forms and makes sure that only valid information is passed to the server from the client-side of the application.

The personal information part can contain the following ASCII characters:

  • Uppercase and lowercase letters (A-Z and a-z)
  • Numeric characters (0-9)
  • Special characters – ! # $ % & ‘ * + – / = ? ^ _ ` { | } ~
  • Period, dot, or full stop (.) with the condition that it cannot be the first or last letter of the email and cannot repeat one after another.

The domain name contains:

  • Letters
  • Digits
  • Hyphens
  • Dots

One of the most popular ways of validating email in JavaScript is by using regular expressions. JavaScript uses regular expressions to describe a pattern of characters.

This file contains the JavaScript code that we need for email validation. We are using regular expressions to validate the email at the client-side of a web application. Angular Email Validation

function ValidateEmail(inputText) {
    var mailformat = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
    if (inputText.value.match(mailformat)) {
        alert("You have entered a valid email address!");    //javaScript Email Validation
        document.form1.text1.focus();
        return true;
    }
    else {
        alert("You have entered an invalid email address!");    //javaScript Email Validation
        document.form1.text1.focus();
        return false;
    }
}
Email Validation in JavaScript

How to get route URL in angular

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>JavaScript email validation</title>
    <link rel='stylesheet' href='form-style.css' type='text/css' /> //link to the source file of css to add styles
</head>

<body onload='document.form1.text1.focus()'>
    <div class="mail">
        <h2>Enter email to Validate</h2>
        <form name="form1" action="#">
            <ul>
                <li><input type='text' name='text1' /></li>
                <li> </li>
                <li class="Validate"><input type="submit" name="Validate" value="Validate"
                        onclick="ValidateEmail(document.form1.text1)" /></li> //Adding the submit button
                <li> </li>
            </ul>
        </form>
    </div>
    <script src="email-validation.js"></script> //link to the source file of javascript function
</body>
</html>

Regular Expression Pattern

/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/

List of valid email

List of invalid email

  • test.ourearth.com [@ is not present]
  • [email protected] [ tld (Top Level domain) can not start with dot “.” ]
  • @you.me.net [ No character before @ ]
  • [email protected] [ “.b” is not a valid tld ]
  • [email protected] [ tld can not start with dot “.” ]
  • [email protected] [ an email should not be start with “.” ]
  • test()*@gmail.com [ here the regular expression only allows character, digit, underscore, and dash ]
  • [email protected] [double dots are not allowed]