Ajax проверка форм на jQuery
Приветствуйте новый jQuery плагин моей разработки. Задача — ajax валидация полей форм.
ajaxValidation
Вся суть плагина — в названии. Он самый, что ни на есть ajax — валидация происходит на стороне сервера, плагин лишь занимается отправкой данных на проверку в нужный момент.
Если вы ищите плагин, который бы проверял поля формы «на месте», на стороне клиента, тогда вам нужно что-то другое. Например, можете посмотреть в сторону Validation.
Зачем писать плагин, который будет отправлять все данные для валидации на сервер? Почему не проверять на стороне клиента?
Плюса в основном три:
- Большая универсальность.
Можно просто отправлять все необходимые поля формы на валидацию и предоставлять PHP скрипту решать, правильны ли данные. Удобно, если вы используете фреймворк или его подобие и можете программно выводить элементы формы и четко судить о том, какие поля формы, какие значения могут иметь.
Собственно в Yii Framework есть компонент, который работает приблизительно так же как и этот плагин. - Меньше кода. Даже, если данные были проверены на стороне клиента, их все равно потом нужно заново проверять уже на сервере после сабмита формы. Двойная работа.
- Некоторые вещи не проверишь на стороне клиента. Например, проверка на уникальность имени пользователя никак не сможет обойтись без запроса к серверу.
Решать, в общем-то, вам. Смотрите по проекту, подходит ли вам этот плагин или нет.
Скриншот
Вот он:
Использование
Простое!
Скачивайте последнюю версию — 1.0.0. Лицензия — MIT. Версия jQuery — 1.4.3 и выше.
Распаковывайте, подключайте к странице:
<script src="jquery.ajaxValidation.js" type="text/javascript" charset="utf-8"></script>
А теперь:
$('form').ajaxValidation();
Готово! Все элементы в формах, которые подпадают под селектор :input при изменении своего содержимого будут обращаться к серверу и проверять значения. Это режим работы по-умолчанию.
В запросе будут переданы:
- Атрибут name элемента.
- Value элемента.
- И дополнительный атрибут элемента (по умолчанию class).
Зачем? Например, вы можете прописать в классах правила валидации. Скриптом-обработчиком получаете список классов, разбираете на составляющие, а затем вызываете известные валидаторы из списка.
Элементы запроса завернуты в массив с именем формы.
Плагин ожидает ответ в виде json объекта из двух переменных: флага hasError и строки message с сообщением о результате проверки.
По-умолчанию, строка-результат записывается в элемент с классом .validationSummary, который находится на одном уровне с тем :input, который вызвал проверку. Поэтому необходимо помещать элементы формы и .validationSummary в контейнер. Вот так:
<div class="row">
<label for="email">Email:</label>
<input type="text" name="email" class="nonEmpty email" />
<div class="validationSummary"></div>
</div>
Во время валидации контейнеру будут присвоены различные классы. По-умолчанию: .waiter, .bad, .good — для разных состояний проверки. Используя их вы сможете достаточно гибко менять оформление формы.
Альтернативный режим работы
Альтернативный режим работы переключается параметром mode : submit. В этом режиме валидация формы происходит при попытке ее сохранения (submit).
Отправляются все поля формы. Если форма проходит валидацию, она сразу же сабмитится. Если есть ошибки, сообщение об ошибке записывается в .validationSummary, который на этот раз должен быть один для всей формы.
Примеры
Легче всего понять работу плагина на примерах.
Пример 1. Демонстрирует основной режим работы и самую простую конфигурацию.
Пример 2. Показывает использование дополнительных настроек, а также использование callback'ов для отправки двух полей в одном запросе.
Пример 3. Альтернативный режим работы и методы, позволяющие подключать и отключать плагин.
Пример 4. Показывает, как используя коллбеки, можно перенаправить вывод сообщений об ошибках в jQuery UI Dialog.
Документация
Доступна на английском здесь. Плагин очень неплохо настраивается и кастомизируется.
Баги
— Вы видите баги? Вот и я не вижу. А они есть.
Если все же увидите, пишите в комментарии или в форму обратной связи (ссылка сверху). Будем исправлять.