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

Поэтому сегодня я предлагаю познакомиться с плагином 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/

Итак, начнем. Нам потребуется подключить к странице два файла: библиотеку jQuery и файл jquery.form.js. Сделаем это в разделе HEAD.

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

Затем создадим самую простейшую форму, не содержащую какой-либо специальной разметки:

<form id="myForm" action="comment.php" method="post">
  Имя: <input type="text" name="name" />
  Комментарий: <textarea name="comment"></textarea>
  <input type="submit" value="Комментировать" />
</form>

и добавим еще немного javascript:

<script type="text/javascript">
$(document).ready(function(){
   $("#myForm").ajaxForm(function() {
     alert("Спасибо за комментарий!");
   });
});
</script>

Вот так просто, но поспешу Вас разочаровать – то, что мы сделали, из серии «пыль в глаза». Объясню почему. Когда мы нажмем кнопку «Комментировать» значения полей name и comment будут переданы методом POST файлу comment.php. Если сервер вернет успешный ответ (т.е. всего лишь код 200) – пользователь увидит сообщение «Спасибо за комментарий!».

Эффектнее было бы не выводить сообщение в alert(), а вставить сообщение непосредственно в DOM.

Так что все, что мы здесь выиграли – избавились от перезагрузки страницы, в принципе уже неплохо, но хотелось бы большего…

Но давайте сначала попробуем выяснить, в чем его отличие метода ajaxForm от метода ajaxSubmit. Оба метода либо не принимают аргументов, либо принимают один аргумент, который может быть или функцией или объектом (в парах ключ/значение могут быть переданы различные опции).

Первое отличие состоит в том, что метод ajaxSubmit отправляет данные из формы, а метод ajaxForm – нет. Когда вызывается метод ajaxSubmit он упорядочивает данные формы в строку запроса и отправляет их серверу. Когда же вызывается метод ajaxForm – он только добавляет необходимое событие в форму таким образом, что можно определить, когда пользователь отправил данные.
Второе отличие: при использовании ajaxForm передаваемые значения будут включать пару имя/значение для самой кнопки (как в примере, или координаты клика мышью, если используется картинка).
Вывод: это не значит, что метод ajaxForm – плохой, а метод ajaxSubmit – хороший. Просто они разные. И какой именно метод использовать – надо решать в каждом конкретном случае.

Давайте теперь познакомимся с доступными опциями, которые принимают оба этих метода. Посмотрим фрагмент кода, чтобы увидеть как задаются опции:

// готовим объект
var options = {
  target: "#divToUpdate",
  url: "form.php",
  success: function() {
        alert("Спасибо за комментарий!");
  }
};
// передаем опции в  ajaxSubmit
$("#myForm").ajaxSubmit(options);

target – идентифицирует тот элемент (или элементы) на странице, который должен быть обновлен при поступлении ответа от сервера. Значение может быть определено как объект или селектор jQuery или элемент DOM. Значение по умолчанию – null.
url – URL, куда должны быть переданы данные из формы. Значение по умолчанию – значение атрибута action формы.
type – метод, с помощью которого должны быть отправлены данные из формы (GET или POST). Значение по умолчанию – значение атрибута method формы. Если атрибут не определен, используется метод GET.
beforeSubmit – функция, которая будет вызвана до отправки данных из формы. Функция, вызываемая тут, может позволить выполнить какие-либо действия до отправки данных, например проверку введенных данных. И если она возвращает false – данные не будут отправлены на сервер. Принимает три аргумента: массив с данными формы, jQuery-объект формы, объект из опций определенных в ajaxForm/ajaxSubmit. Массив данных формы принимает такой вид:

[ { name: "username", value: "Vasya" },
 { name: "password", value: "secret" } ]

Значение по умолчанию – null.
success – функция, которая будет вызвана после отправки данных серверу и при условии успешного ответа сервера. Полученные данные – или responseText или responseXML, в зависимости от значения опции dataType. Значение по умолчанию – null.
dataType – определяет ожидаемый тип данных в ответе сервера. Может принимать значения: null, «xml«, «script«, или «json«. Опция позволяет точно определить, как именно должен быть обработан ответ сервера.
- «xml»: if dataType == «xml» ответ сервера рассматривается как XML и в success (если опция определена) отправляется значение responseXML;
- «json»: if dataType == «json» ответ сервера будет выполнен и передан в success (если опция определена);
- «script»: if dataType == «script» ответ сервера будет выполнен в глобальном контексте;
Значение по умолчанию – null.
semantic – флаг, определяющий должны ли данные передаваться в строгом порядке следования (это происходит медленнее).

Упорядочивание данных формы происходит в порядке следования элементов, исключая элементы input, имеющие тип image.

Вы должны всего лишь установить эту опцию в true, если Ваш сервер требует строгого порядка следования И форма содержит элементы input типа image. Значение по умолчанию – false.
resetForm – флаг, определяющий должна ли форма быть сброшена если передача данных была успешной. Значение по умолчанию – null.
clearForm – флаг, определяющий должна ли форма быть очищена если передача данных была успешной. Значение по умолчанию – null.

Методы ajaxForm и ajaxSubmit не единственные. Давайте немного познакомимся с остальными.

Метод formSerialize – упорядочивает данные из элементов формы в строку запроса. Метод возвращает строку в формате: name1=value1&name2=value2.

var qString = $("#myFormId").formSerialize();
  // теперь данные могут быть отправлены
  //  через $.get, $.post, $.ajax, и т.д.
$.post("myscript.php", qString);

Метод fieldSerialize – упорядочивает данные из элементов формы в строку запроса. Удобно применять, когда требуется упорядочить в строку запроса только часть данных из формы. Метод возвращает строку в формате: name1=value1&name2=value2

var qString = $("#myFormId .myFields").fieldSerialize();

Метод fieldValue – возвращает значения выбранных элементов в виде массива. С версии 0.91, метод всегда возвращает именно массив. Если нет корректных данных возвращается пустой массив, в противном случае массив содержит один или более элементов.

// получаем значения для полей с типом password
var value = $("#myFormId :password").fieldValue();
alert("Пароль: " + value[0]);

Метод resetForm – сбросит форму в начальное состояние через новый вызов элементов формы из объектной модели документа.

$("#myFormId").resetForm();

Метод clearForm – очищает элементы формы. Этот метод очистит все элементы ввода с типом text, password, textarea, очистит выбор в элементах select и снимет отметки с элементов radio и checkbox.

$("#myFormId").clearForm();

Метод clearFields – очищает элементы формы. Удобно применять когда требуется очистить только часть формы.

$("#myFormId .myFields").clearFields();

Согласен, согласен… Получилось очень много и довольно нудно. Поэтому вот Вам пример формы, попробуйте его, а при желании посмотрите исходные коды этого примера. Я старался все очень подробно комментировать.

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

Важно! Помните, что любая форма – потенциальная дыра в безопасности. Никогда не стоит полагаться на проверку данных на стороне клиента. Обязательно производите проверку данных на сервере!