In this tutorial we will illustrate you how to do email validation in forms using jQuery.

Sometimes, user enter email address in wrong format. A form should not allow wrong email address. Instead, it should display an alert and notify user about the incorrect format of email address.

By inserting email validation codes, one can easily make smart form that could only accept right format of email address.

 

Below is our complete code with download and live demo option.

The codes will contain a simple regular expression that matches the input characters of email address.

Here is the expression:

/^[w-.+]+@[a-zA-Z0-9.-]+.[a-zA-z0-9]{2,4}$/;

It will scan the input email address, matches each and every character. If any of the character does not matches with the above expression, “invalid email” alert notification will display.

What above regular expression will match?


. : Matches any single character except a new line

+ : Matches the preceding character or repeated character.

$ : Matches character at the end of the line.

. : Matches only period.

^ : Matches the beginning of a line or string.

: Escapes a special character.

- : Range indicator. [a-z, A-Z]

-: Escapes a special character.(e.g. escaping - by -)

[0-9] : It matches digital number from 0-9.

[a-z] : It matches characters from lowercase ‘a’ to lowercase ‘z’.

[A-Z] : It matches characters from uppercase ‘A’ to lowercase ‘Z’.

w: Matches a word character and underscore. (a-z, A-Z, 0-9, _).

W: Matches a non word character (%, #, @, !).

{M, N} : Donates minimum M and maximum N value.

HTML File – emailvalidation.html


<html>
<head>
<title>Email Validation</title>
<!-- Include js File Here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/emailvalidation.js"></script>
<!-- Include CSS File Here -->
<link href='css/emailvalidation.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="main">
<div class="first">
<h1>Email Validation using jQuery</h1>
<form method="post" action="#">
<label>First Name:</label>
<input type='text' name="fname" id="fname" placeholder='First Name'/>
<label>Last Name: </label>
<input type='text' name="lname" id="lname" placeholder='Last Name'/>
<label>Email Address: </label>
<input type='text' name="ename" id='txtEmail' placeholder='Valid Email Address'/>
<input type='submit' id='btnValidate' name="submit" Value='Submit' />
</form>
</div>
</div>
</body>
</html>

jQuery File – emailvalidation.js


$(document).ready(function(e) {
$('#btnValidate').click(function() {
var sEmail = $('#txtEmail').val();
// Checking Empty Fields
if ($.trim(sEmail).length == 0 || $("#fname").val()=="" || $("#lname").val()=="") {
alert('All fields are mandatory');
e.preventDefault();
}
if (validateEmail(sEmail)) {
alert('Nice!! your Email is valid, now you can continue..');
}
else {
alert('Invalid Email Address');
e.preventDefault();
}
});
});
// Function that validates email address through a regular expression.
function validateEmail(sEmail) {
var filter = /^[w-.+]+@[a-zA-Z0-9.-]+.[a-zA-z0-9]{2,4}$/;
if (filter.test(sEmail)) {
return true;
}
else {
return false;
}
}

Css File – emailvalidation.css


@import "http://fonts.googleapis.com/css?family=Droid+Serif";
/* Above line is used for online google font */
h1 {
text-align:center
}
div.main {
width:960px;
height:655px;
margin:50px auto;
font-family:'Droid Serif',serif
}
div.first {
width:380px;
height:570px;
float:left;
padding:15px 60px;
background:#f8f8ff;
box-shadow:0 0 10px gray;
margin-top:20px
}
input {
width:100%;
padding:10px;
margin-top:10px;
font-size:16px;
margin-bottom:30px
}
#btnValidate {
width:100%;
padding:10px;
margin-top:10px;
background-color:#474242;
cursor:pointer;
color:#fff;
border:2px solid #adadad;
font-size:20px;
font-weight:700
}
#btnValidate:hover {
background-color:#adadad;
border:2px solid #474242
}

Conclusion

I hope, this tutorial for email validation using jQuery script is helpful for you. If you have any other method, you can share with us in the space given below.