Сделаем еще один небольшой шаг вперед, связанный с валидацией нашей формы. Для поля e-mail мы можем не просто установить проверку пустого ввода, но и задать необходимое форматирование. Указанное решение было подробно описано Стивом Рейнолдсом (Steve Reynolds) в статье Validation With jQuery.
Пример Стива очень интересен и стоит тщательного изучения. Стив использует jQuery функцию keyup для проверки ввода e-mail по регулярному выражению в режиме реального времени.
Для начала мы добавим функцию isValidEmailAddress, написанную Стивом, в конец нашего скрипта:
...
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);
}//is valid e-mail
...
Давайте более внимательно изучим существующий скрипт. После проверки поля на пустой ввод (val().length == 0) нам понадобится установить дополнительную проверку того, что это поле не является полем e-mail.
С помощью Firefox и Firebug я определил, что поле e-mail обладает классом .fldemail.
Теперь осталось лишь добавить дополнительную инструкцию else if для проверки e-mail. Обновленный скрипт будет выглядеть следующим образом:
...
jQuery(".cform :input").blur(function(){
if (jQuery(this).val() != "Submit") {
if (jQuery(this).val().length == 0) {
jQuery(this).after('<span class="wrong"> ! </span>');
/* Проверка на наличие класса fldemail*/
}else if(jQuery(this).hasClass("fldemail") == true){
var email = jQuery(this).val();
/*Запуск функции, которая возвращает true или false*/
if(isValidEmailAddress(email)){
//Если поле заполнено верно
jQuery(this).after(
'<span class="correct"> thanks. </span>');
}else{
//Если поле заполнено неверно
jQuery(this).after('<span class="wrong"> ! </span>');
}//if...else
//end email check
}else{
/*Остальные поля заполнены верно*/
jQuery(this).after('<span class="correct"> thanks. </span>');
}//end if no length
}//end if...else !submit
});//end blur function
...
Проверка правильности ввода e-mail адресов готова! Скриншот демонстрирует ее функционирование:
