Prev
Home
Next
Menu

JS Input Validation – I (E-mail Id)

Validating email id is a very important point while processing an HTML form. Here, we have discussed about how to validate an email using JavaScript:

An email is a string separated into two parts by @ symbol. It has a “user_info” and a domain that is user_info@domain.

The user_info part contains the following ASCII characters.

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

HTML embedded JS code to validate an email id:

<html>
<head>
 <title>JavaScript email validation</title>
 <script language="javascript">
  function validateEmail(text)
  {
      var pattern = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
      if(text.value.match(pattern))
      {
          document.frm.txt.focus();
          return true;
      }
      else
      {
          alert("You have entered an invalid email address!");
          document.frm.txt.focus();
          return false;
      }
  }
</script>
</head>
<body onload='document.frm.txt.focus()'>
  <h2>Input an email and Submit</h2>
  <form name="frm" action="test.html" onSubmit="return validateEmail(document.frm.txt)">
    <input type="text" name="txt"/>
    <br><br>
    <input type="submit" name="submit" value="Submit"/>
  </form>
</body>
</html>
 

Explanation

The above JS code is better understood, if we have analyzed the following regular expression for e-mail id validation.

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

Each of the characters mentioned in the regular expression is described below.

Character

Description

/ .. /

All regular expressions start and end with forward slashes

^

Matches the beginning of the pattern string

\w+

Matches one or more word characters including the underscore and it is equivalent to [A-Za-z0-9_]

[\.-]

\ Indicates that the next character is special and not to be interpreted literally and .- matches character . or –

?

Matches the previous character 0 or 1 time and here previous character is [.-]

\w+

Matches 1 or more word characters including the underscore and equivalent to [A-Za-z0-9_]

*

Matches the previous character 0 or more times

([.-]?\w+)*

Matches 0 or more occurrences of [.-]?\w+

\w+([.-]?\w+)*

The sub-expression \w+([.-]?\w+)* is used to match the username in the email and it begins with at least one or more word characters including the underscore, equivalent to [A-Za-z0-9_], followed by . or – and . or – must follow by a word character (A-Za-z0-9_)

@

It matches only @ character

\w+([.-]?\w+)*

It matches the domain name with the same pattern of user name described above.

\.\w{2,3}

It matches a . followed by two or three word characters, e.g., .com, .edu, .org, .biz, .in, .us, .co etc.

+

The + sign specifies that the above sub-expression shall occur one or more times, e.g., .com, .co.us, .edu.in etc.

$

Matches the end of the pattern string

 

Note: We must implement the web page named “test.html” as mentioned in the code. This page might look like this:

<html>
<body bgcolor='lightblue'>
<h3>Friend, you are successful!</h3>
</body>
</html>

 

Prev
Home
Next