Properly formatted email validation

Let's just take this one small step further. It's one thing to leave the e-mail address blank, but we might as well point out if it's not well formed. Steve Reynolds, has an excellent how-to post on his site about using jQuery to validate an e-mail address. You can read up on it here: http://www.reynoldsftw.com/2009/03/live-email-validation-with-jquery/.

Steve's code demonstration is particularly interesting and worth a look at, as he uses jQuery's keyup function to check validation against the e-mail expression in real time.

For our purposes, we'll be borrowing Steve's regular expression function and fitting it into the validation check we've already started, which works on the blur function.

First up, below our existing script, we'll add in Steve's isValidEmailAddress function as follows:

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]\.|l[0-9]{2}\.|[0-9]{l,2}\.))((25[0-5]|2[0-4][0-9]|l[0-9]{2}|[0-9]{l,2})\.){2}(25[0-5]|2[0-4][0-9]|l[0-9]{2}|[0-9]{l,2})\]?$)/i); return pattern.test(emailAddress); }//is valid e-mail

Next, we'll take a close look at our existing script. What we want to do, is after checking for a value of nothing (val().length == 0), we'll double-check that the input field is not the email field.

Using Firefox and Firebug, I explored the DOM and discovered that the email field form has a unique class named as .fldemail.

We'll place our new statement as an extension of our current if statement with an else if statement before our general else statement.

Our updated blur script now looks like this (note the new email validation, if...else statement in bold):

jQuery(".cform :input").blur(function(){

/*this if makes sure we don't target the submit button or email field*/

/*this "if" targets empty fields*/ if (jQuery(this).val().length == 0) {

jQuery(this).after('<span class="wrong"> ! </span>');

/*This "else if" targets if the field is the email field*/ }else if(jQuery(this).hasClass("fldemail") == true){

/*Run's Steve's function and return true or false*/ if(isValidEmailAddress(email)){

//This shows the user the form is valid jQuery(this).after(

■<span class="correct"> thanks. </span>');

//This shows the user the form is invalid jQuery(this).after('<span class="wrong"> ! </span>'); }//if...else

//end email check

/*otherwise field is fine*/

jQuery(this).after('<span class="correct"> thanks. </span>'); }//end if no length

We can now not only check for empty fields, but also check for a valid e-mail address on blur of a field input:

Validation tip: don't go overboard!

The cforms II plugin server-side validation is more than adequate. Again, we're just trying to speed things along with a little client-side validation, " and not frustrate our users because we've created a bunch of strict formatting rules for data. Some people may have phone numbers, or zip codes that are a little differently formatted than you would expect, and for most intents and purposes, this is OK. Your best bet is to use your jQuery validation to prompt hints and inline help and guide the user, rather than force them to comply with exact data formatting.

Blogging For Business

Blogging For Business

Download this Guide And Discover How Start And Run Your Very Own Successful Business Blog. Always Wanted To Start Your Own Blog?

Get My Free Ebook


Post a comment