jQuery Email Validation effect

Home FormjQuery Email Validation effect

jQuery Email Validation effect

13 years ago Views

21269

4204

reynoldsftw

we will describe how you can validate the format of an email address “live” using jQuery and regular expressions without the need for a plugin . The code is pretty lightweight, uses a simple jQuery event to fire the code, and gives the user great visual feedback on whether what they’ve entered is good, or bad… so here we go

HTML

First up, let’s create the HTML:

<div><input type="text" id="validate" width="30"><span id="validEmail"></span></div>

This creates a basic input text box for the email address, and a location for an image to appear for user feedback. Pretty simple.

Javascript

Next, let’s create the function that checks the email address against a regular expression. This expression may not be perfect, but it does a pretty good job:

function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
return pattern.test(emailAddress);
}

Stylesheet

For this example, I am lumping everything into one .html page – you probably want to create your own seperate stylesheets, and .js files – but for the purpose of this demo, let’s stick with it in one:

<style>
#validEmail
{
margin-top: 4px;
margin-left: 9px;
position: absolute;
width: 16px;
height: 16px;
}
</style>

jQuery

The last part to this is obviously the jQuery to do the live validation. It’s pretty simple, we hook up a keyup event to the input box we created in the HTML section. Within that event function, the jQuery calls the isValidEmailAddress function with the current value of the input box. If it returns a positive result (ie the email address is valid) then it will show a nice icon. If not, it will display an icon. Lastly, it also hides the tick/cross images when the input box is cleared.

$(document).ready(function() {
 
$("#validate").keyup(function(){
var email = $("#validate").val();
 
if(email != 0)
{
if(isValidEmailAddress(email))
{
 
$("#validEmail").css({ "background-image": "url('validYes.png')" });
 
} else {
 
$("#validEmail").css({ "background-image": "url('validNo.png')" });
 
}
 
} else {
 
$("#validEmail").css({ "background-image": "none" });
 
}
});
});

This should obviously be placed into the <HEAD> section of your page, after you have declared the jQuery library.