Delphinidin

E-mail validation is critical for a newsletter sign-up on a Web site. If users submit a bad e-mail address, it can cost you time and money to get it cleaned out your database. Using jQuery, you can set up simple e-mail validation on a form without having to write a lot of code. This sort of script can be useful on a Web site, such as the Laithwaites Wine special off er email sign-up form, where you don't need to validate multiple fields with different types data requiring advanced validation. I demonstrate advanced validation using a popular jQuery validation plug-in at the end of this chapter. It's important to remember that you should never rely solely on client-side JavaScript validation; server-side validation should always be present if client-side is not available.

The following code uses a regular expression to test that the e-mail address being submitted is in the correct format. The click event is attached to the Submit button so that the e-mail address is validated only upon submission. Various error and success messages are shown to the user depending upon whether the e-mail address is invalid or no e-mail address is entered. Upon successful capture of the e-mail address, the form is replaced with a message thanking the user for signing up.

Regular expressions are special patterns that can be created to match strings of text and numbers. They are commonly used for matching e-mail addresses, phone numbers, ZIP codes, credit card numbers, and so on. Regular expressions are a standard practice used in most Web programming languages and you can search for specific regular expressions on the Internet to be used in your scripts.

1. Start off by creating a very simple e-mail form with an e-mail input field and a Submit button.

<div id="email-form">
<input type="text" id="email-input" name="email"/>
<input type="submit" value="Submit" id="email-submit" name="submit"/>
</div>

2. Select the #email-submit button and attach a click event to it. Inside of the click event, add a return false statement to ensure that when the button is clicked, the default submission is halted.

$("#email-submit").bind('click', function(){
return false;
});

3. Create a variable called emailReg and set it equal to a regular expression for testing that the e-mail is valid and accurate.

$("#email-submit").bind('click', function(){
var emailReg = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
return false;
});

4. Create a variable called email and set the value of #email-input using a selector statement.

$("#email-submit").bind('click', function(){
var emailReg = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
var email = $("#email-input").val();
return false;
});

5. Add a selector statement that selects the #email-form element and inserts an error div before it. This holds all of the error messaging needed to show the error messages to the user.

$("#email-submit").bind('click', function(){
var emailReg = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
var email = $("#email-input").val();
$('#email-form').prepend('<div class="error"></div>');
return false;
});

6. Add an else if statement that is used to test whether something has been entered when the Submit button is clicked.

$("#email-submit").bind('click', function(){
var emailReg = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
var email = $("#email-input").val();
$('#email-form').prepend('<div class="error"></div>');
if(email == '') {
} else if {
}
else {
}
return false;
});

7. In the if statement, add a selector statement to select the error div and replace it with an error element that contains text informing the user that they failed to enter an e-mail address:

$("#email-submit").bind('click', function(){
var emailReg = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
var email = $("#email-input").val();
$('#email-form').prepend('<div class="error"></div>');
if(email == '') {
$(".error").replaceWith('<div class="error">You forgot to enter an email address.</div>');
} else if {
}
else {
}
return false;
});

8. In the else if statement, add a selector statement to select the error div and replace it with an error element that contains text informing the user that they failed to enter an e-mail address. The else if statement tests whether the e-mail is valid when compared with the regular expression.

$("#email-submit").bind('click', function(){
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var email = $("#email-input").val();
$('#email-form').prepend('<div class="error"></div>');
if(email == '') {
$(".error").replaceWith('<div class="error">You forgot to enter an email address.</div>');
} else if(!emailReg.test(email)) {
$(".error").replaceWith('<div class="error">Please enter a valid email address.</div>');
}
else {
}
return false;
});

9. Finally, add an else statement that will replace the e-mail form elements with a message that informs the user that they have subscribed. This message is displayed only if the if and else if statements pass their tests.

$("#email-submit").bind('click', function(){
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var email = $("#email-input").val();
$('#email-form').prepend('<div class="error"></div>');
if(email == '') {
$(".error").replaceWith('<div class="error">You forgot to enter an email address.</div>');
} else if(!emailReg.test(email)) {
$(".error").replaceWith('<div class="error">Please enter a valid email address.</div>');
}
else {
$("#email-form").html('<div class="success">Thank you, you have been subscribed.</div>');
}
return false;
});

Here are some ways to improve this script:

+ You could change the click event to a change event and bind it to the input field instead of the button if you wanted to set up a real-time validation that occurs as the user types into the input field. Th is would require some additional coding to set up the correct message to inform the user of what is required for the field and so on.
+ Add an error highlight to the e-mail input field after submitting the form if the wrong data has been entered.
+ Use the popular regular expressions to add more fields to your form and validate different types of data.