Как задать форматирование для e-mail адресов

Сделаем еще один небольшой шаг вперед, связанный с валидацией нашей формы. Для поля 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 адресов готова! Скриншот демонстрирует ее функционирование: