JavaScript: HTML Form - email validation

Email validation

Validating email is a very important point while validating an HTML form. In this page we have discussed how to validate an email using JavaScript :

An email is a string (a subset of ASCII characters) separated into two parts by @ symbol. a "personal_info" and a domain, that is [email protected] The length of the personal_info part may be up to 64 characters long and domain name may be up to 253 characters.

video_libraryWatch JavaScript form validation video tutorial.

The personal_info part contains the following ASCII characters.

  • 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.

The domain name [for example com, org, net, in, us, info] part contains letters, digits, hyphens, and dots.

Example of valid email id

Example of invalid email id

  • mysite.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 "." ]
  • mysite()*@gmail.com [ here the regular expression only allows character, digit, underscore, and dash ]
  • [email protected] [double dots are not allowed]

JavaScript code to validate an email id

function ValidateEmail(mail) 
 if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value))
    return (true)
    alert("You have entered an invalid email address!")
    return (false)

To get a valid email id we use a regular expression /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/. According to http://tools.ietf.org/html/rfc3696#page-5 ! # $ % & ‘ * + – / = ? ^ ` . { | } ~ characters are legal in the local part of an e-mail address but in the above regular expression those characters are filtered out. You can modify or rewrite the said regular expression.

Flowchart :

Flowchart : JavaScript - Email validation

Explanation of the said Regular expression (email id)

Regular Expression Pattern

Character Description
/ .. / All regular expressions start and end with forward slashes.
^ Matches the beginning of the string or line.
\w+ Matches one or more word characters including the underscore. Equivalent to [A-Za-z0-9_].
[\.-] \ Indicates that the next character is special and not to be interpreted literally.
.- matches character . or -.
? Matches the previous character 0 or 1 time. Here previous character is [.-].
\w+ Matches 1 or more word characters including the underscore. 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. 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., .edu, .org, .com, .uk, .us, .co etc.
+ The + sign specifies that the above sub-expression shall occur one or more times, e.g., .com, .co.us, .edu.uk etc.
$ Matches the end of the string or line.

Note: If you want to work on 4 digit domain, for example, .info then you must change w{2,3} to w{2,4}.

Let apply the above JavaScript function in an HTML form.


<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>JavaScript form validation - checking email</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />      
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input an email and Submit</h2>
<form name="form1" action="#"> 
<li><input type='text' name='text1'/></li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="ValidateEmail(document.form1.text1)"/></li>
<script src="email-validation.js"></script>

JavaScript Code

function ValidateEmail(inputText)
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
return true;
alert("You have entered an invalid email address!");
return false;

CSS Code

li {list-style-type: none;
font-size: 16pt;
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
.mail h2 {
margin-left: 38px;
input {
font-size: 20pt;
input:focus, textarea:focus{
background-color: lightyellow;
input submit {
font-size: 12pt;
.rq {
color: #FF0000;
font-size: 10pt;

View the Javascript email validation in the browser

file_download Download the validation code from here.

Other JavaScript Validation:

Previous: JavaScript: HTML Form - restricting the length
Next: JavaScript: HTML Form - Date validation

JavaScript: Tips of the Day

Capitalizes the first letter of a string


const tips_capitalize = ([first, ...rest], lowerRest = false) =>
  first.toUpperCase() + (lowerRest ? rest.join('').toLowerCase() : rest.join(''));

console.log(tips_capitalize('javaScript', true));