How to Validate an E-mail Using JavaScript

Validating an e-mail is very hard but a possible thing. In this tutorial, we will show how to validate an e-mail with JavaScript.

An email is a string consist of 3 parts: username, @ symbol and domain. The first part of an email address is the username.

@ Symbol fits in between the username and the domain of your email address.

The domain consists of two parts: the mail server and the top-level domain. The mail server is the server hosting the email account (“Gmail”). The top-level domain is the extension, such as .com, .net or .info.

Each part of a domain name can be no longer than 63 characters.

The first part contains the following:

  • Uppercase (A-Z) and lowercase (a-z) English letters.
  • Digits (0-9).
  • Characters ! # $ % & ' * + - / = ? ^ _ ` { | } ~
  • Character . ( period, dot or fullstop) provided that it is not the first or last character and it will not come one after the other.

To get a valid email id we should use the following regular expression which matches any email address: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/. Here, any of the patterns has its own description.

Let’s create a code.

1. Add HTML

Create html with <form>, <input> and <button> tags.

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>Enter an email address:</p>
  <input id='email'>
  <button type='submit' id='validate'>Validate!</button>
</form>
<h2 id='result'></h2>

2. Add JavaScript

If you input a valid e-mail address, by clicking on the "validate" button the result will be blue, if you enter an invalid e-mail address then the result will be red.

<script>
function validateEmail(email) {
  var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  return re.test(email);
}
function validate() {
  var $result = $("#result");
  var email = $("#email").val();
  $result.text("");

  if (validateEmail(email)) {
    $result.text(email + " is valid");
    $result.css("color", "blue");
  } else {
    $result.text(email + " is not valid");
    $result.css("color", "red");
  }
  return false;
}
$("#validate").on("click", validate);
</script>

Here’s the full code:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form>
      <p>Enter an email address:</p>
      <input id='email'>
      <button type='submit' id='validate'>Validate!</button>
    </form>
    <h2 id='result'></h2>
    <script>
      function validateEmail(email) {
        var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        return re.test(email);
      }
      function validate() {
        var $result = $("#result");
        var email = $("#email").val();
        $result.text("");
      
        if (validateEmail(email)) {
          $result.text(email + " is valid");
          $result.css("color", "blue");
        } else {
          $result.text(email + " is not valid");
          $result.css("color", "red");
        }
        return false;
      }
      $("#validate").on("click", validate);
    </script>
  </body>
</html>

Do you find this helpful?

Related articles