Мы уже пробовали создать ajax-форму, об этом можно было прочитать в статье jQuery Form – делаем ajax-форму. Но любая форма без проверки данных, вводимых пользователем – это серьезная брешь в безопасности ресурса.

Важно! Никогда не стоит полагаться на проверки данных на стороне клиента! Обязательно проводите проверку на сервере!

Поэтому сегодня я предлагаю познакомиться с плагином jQuery Validation, который позволит производить проверку вводимых данных «на лету» и, что немаловажно, очень хорошо взаимодействует с плагином jQuery Form. Ну а для начала просто посмотрите пример проверки данных в ajax форме…

Вы можете скачать исходный код примера и воспроизвести этот пример на своем сайте.

Ну а теперь начнем разбираться. Сразу скажу, что для того, чтобы подробно рассказать о плагине jQuery Validation, не хватит и нескольких статей. Поэтому поставим себе целью по окончании прочтения статьи (и тестирования примера конечно) иметь некий базовый набор знаний, который поможет решить проблемы в самых распространенных случаях. Если же понадобится что-то большее, то подробную информацию Вы сможете найти на странице плагина jQuery Validation.

Как обычно, сначала потребуется подключить библиотеку jQuery (jQuery Validation работает с версией 1.2.2 и выше). Понятно, что понадобится и jquery.form.js, и собственно query.validate.js – все это подключаем в разделе HEAD нужной страницы. Можно подключить и файл additional-methods.js, содержащий, как ясно из названия, дополнительные методы.

<script type="text/javascript" src="js/jquery-1.2.3.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/additional-methods.js"></script>

Стилевые таблицы и HTML-код Вы сможете посмотреть в файле примера, там нет ничего необычного. Отмечу только, что стоит следовать следующим рекомендациям по разметке:

Каждый элемент input или select имеет «свой» элемент label с атрибутом for, значение которого одинаково со
значением атрибута id соответствующего элемента input или select. В общем, лучше на примере:

<label for="firstname">Имя</label>
<input id="firstname" name="fname" type="text" />

Теперь приведу javascript-код. Несмотря на то, что выглядит он довольно страшно, ничего особенно сложного в нем нет.

<script type="text/javascript">
$(document).ready(function(){
  // готовим опции для метода
  // ajaxSubmit плагина jquery.form.js
  var options = {
  	target: "#output",
    timeout: 3000 // тайм-аут
  };

  $("#myForm").validate({
  	submitHandler: function(form) {
   	  // вызываем метод ajaxSubmit
   	  // плагина jquery.form.js
  	  $(form).ajaxSubmit(options);
    },
    focusInvalid: false,
    focusCleanup: true,
    rules: {
      Name: {
      	required: true,
      	minlength: 2,
      	maxlength: 12
      },
      Email: {
      	required: true,
      	email: true
      },
      // .............
      // еще настройки
      // см. в исх.кодах
      // .............
      Examine: {
      	required: true,
      	equal: 13
      }
    },
    messages: {
      Name: {
        required: "Укажите свое имя!",
        minlength: "Не менее 2 символов",
        maxlength: "Не более 12 символов"
      },
      Email: {
        required: "Нужно указать email адрес",
        email: "Нужен корректный email адрес!"
      },
      // .............
      // еще настройки
      // см. в исх.кодах
      // .............
      Examine: {
      	required: "Надо решить этот пример!",
      	equal: "Вы в школе учились?"
      }
    },
    errorPlacement: function(error, element) {
      var er = element.attr("name");
      error.appendTo( element.parent()
      .find("label[@for="" + er + ""]")
      .find("em") );
    }
});
});
</script>

Начало кода уже должно быть Вам знакомо по предыдущей статье, а сейчас самое интересное для нас это пожалуй основной метод – validate,

$("#myForm").validate({
  // список опций
});

который может принимать просто огромное количество опций (набор пар ключ/значение) и в соответствии с ними выполнять проверку выбранной формы. Метод validate устанавливает обработчики событий для submit, focus, keyup, blur и click, чтобы переключиться в проверку всей формы или ее отдельных полей.

Приведу наиболее востребованные опции с пояснениями:

submitHandler – когда форма корректно заполнена, вызывает обработчик для передачи формы. Заменяет собой передачу формы по умолчанию. В примере (см.выше) используется передача данных через метод ajaxSubmit() плагина jQuery Form.

ignore – отменяет проверку полей формы с указанным селектором. В примере ниже – отменяет проверку для всех элементов с классом «ignore«.

$("#myform").validate({
   ignore: ".ignore"
});

rules – пары ключ/значение, описывающие правила проверки. Ключ – это значение атрибута name элемента (или группы элементов для элементов checkbox и radio). Значение – объект (или строка), содержащий пары правило/параметр. Правила могут быть считаны еще и из разметки (классы, атрибуты, метаданные). Эти способы можно комбинировать между собой.

$(".selector").validate({
   rules: {
     // поле name - обязательное
     name: "required",
     // для поля email
     email: {
       // заполнение обязательно
       required: true,
       // значение д.б. корректным
       email: true
     }
   }
});

messages – пары ключ/значение, описывающие сообщения в процессе проверки. Ключ – это значение атрибута name элемента (или группы элементов для элементов checkbox и radio). Значение же его будет отображено для соответствующего элемента.

$(".selector").validate({
   rules: {
     name: "required",
     email: {
       required: true,
       email: true
     }
   },
   messages: {
     // если не заполнено поле name
     // user увидит сообщение
     name: "Пожалуйста, представьтесь!",
     email: {
       // если не заполнено поле email
       // user увидит сообщение
       required: "Нужно указать e-mail!",
       // если поле email некорректно
       // user увидит сообщение
       email: "E-mail д.б. корректным!"
     }
   }
});

onsubmit, onfocusout, onkeyup, onclick – отвечают за инициализацию проверки полей формы по соответствующему событию. По умолчанию все установлены в true. Любые из этих опций можно отключить, установив значение false.

errorPlacement – в качестве значения функция, принимающая два аргумента. Первый – ошибка как объект jQuery, второй – некорректный элемент как объект jQuery. С помощью этой опции сообщение об ошибке может быть выведено в целевой элемент в разметке страницы. Давайте разберем на примере:

errorPlacement: function(error, element) {
      var er = element.attr("name");
      error.appendTo( element.parent()
      .find("label[@for="" + er + ""]")
      .find("em") );
    }

В переменную er получаем значение атрибута name элемента, в котором обнаружена ошибка. Сообщение об ошибке добавляем куда? Правильно – в целевой элемент, который еще надо найти. Находим «родителя» этого элемента, в нем обнаруживаем элемент label с атрибутом for, который имеет значение точно такое же, которое у нас уже хранится в переменной er (помните рекомендации по разметке?), находим в нем целевой элемент em. Вот туда и будет вставлен текст сообщения об ошибке.

А теперь давайте подробнее остановимся на rules и messages. Ну наверное больше все-таки на rules, поскольку правила проверки задаются именно здесь, а в messages определяются сообщения, которые будут выводиться в том случае, когда не выполняется требование, определенное в rules.

Методы проверки
Плагин jQuery Validation предоставляет целый набор стандартных методов проверки.
required( ) – делает элемент обязательным для заполнения. Возвращает false, если элемент пустой (текстовое поле), не отмечен (radio/checkbox) или ничего не выбрано (для select).

$("#myform").validate({
  // здесь field - идентификатор
  // соответствующего поля ввода
  rules: { field: "required" }
});

remote(url) - запрашивает ресурс, расположенный на сервере через $.ajax (XMLHttpRequest) и передает пару ключ/значение, соответствующую атрибуту name проверяемого элемента в GET-запросе. Ответ сервера оценивается как данные в формате JSON и должен вернуть true для корректных данных, и false – для некорректных.

$("#myform").validate({
  rules: {
    email: {
      required: true,
      email: true,
      remote: "check-email.php"
    }
  }
});

minlength(length) – элемент ввода будет требовать ввести количество символов не менее, чем указано в length. Работает с текстовыми полями ввода (в т.ч. с password), c selects и checkbox.

$("#myform").validate({
  rules: {
    field: {
      required: true,
      minlength: 3
    }
  }
});

maxlength(length) – элемент ввода будет требовать ввести количество символов не более, чем указано в length. Работает с текстовыми полями ввода (в т.ч. с password), c selects и checkbox.

$("#myform").validate({
  rules: {
    field: {
      required: true,
      maxlength: 4
    }
  }
});

rangelength(range) – элемент ввода будет требовать ввести количество символов, соответствующее диапазону, указанному в range.

$("#myform").validate({
  rules: {
    field: {
      required: true,
      rangelength: [2, 6]
    }
  }
});

min(value), max(value), range(range) – смысл тот же, только фигурирует уже не количество символов, а числа.

$("#myform").validate({
  rules: {
    field: {
      required: true,
      range: [13, 23]
    }
  }
});

equalTo(other) – требует, чтобы элемент соответствовал (был эквивалентен) другому элементу, указанному в other. Возвращает true, если это условие выполняется, и false в противном случае. Работает с текстовыми полями.

$("#myform").validate({
  rules: {
    password: "required",
    password_again: {
      equalTo: "#password"
    }
  }
});

email( ) – делает элемент ввода требующим корректно введенного e-mail адреса. Возвращает true, если адрес корректный, и false в противном случае. Работает с текстовыми полями.

$("#myform").validate({
  rules: {
    field: {
      required: true,
      email: true
    }
  }
});

url( ) – делает элемент ввода требующим корректно введенного URL (типа, начните с http://). Возвращает true, если URL корректный, и false в противном случае. Работает с текстовыми полями.

$("#myform").validate({
  rules: {
    field: {
      required: true,
      url: true
    }
  }
});

Честно говоря, два последних метода из стандартного набора мне не понравились, впрочем как и из дополнительного набора методов в файле additional-methods.js. Метод url() например признал валидным http://www.собаказлая.ru, а метод email( ) также пропускает кириллицу в адресе. Ну да ладно. Можно же дополнить плагин своим методом или доверить проверку валидности сценарию на сервере.

Я рассказал далеко не все, и поэтому в заключение хочу привести еще несколько ссылок на примеры:
http://jquery.bassistance.de/validate/demo/marketo/
http://jquery.bassistance.de/validate/demo/marketo/step2.htm
http://jquery.bassistance.de/validate/demo/milk/
http://jquery.bassistance.de/validate/demo/multipart/

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru