Проверка данных форм - jQuery Validation Plugin
Проверка данных форм это чрезвычайно важная процедура для повышения “юзабилити” при работе с формами. В первую очередь потому, что пользователь сразу же получает уведомление в том случае, если какие либо данные введены неверно. Сегодня я расскажу об очень полезном плагине для jQuery, который облегчает задачу проверки введенных данных до минимума. Это jQuery Validation Plugin. Вот некоторые его возможности:
- Способен проверять значения email, URL, числа, цифры, номера кредитных карт, минимальное и максимальное значения и др.
- Поддержка удаленной проверки используя AJAX.
- Автоматическое отображение сообщений об ошибках.
Итак, попробуем скрипт в действии. Допустим, нам необходимо создать простую форму для логина пользователя, в которой есть 3 поля - имя пользователя, пароль и checkbox “запомнить”.
<form name="myForm" id="myForm" action="" method="post" style="margin:20px"> <label for="username">Имя пользователя </label><br/> <input type="text" name="username" value="" /><br/> <label for="password">Пароль</label><br/> <input type="password" name="password" value="" /><br/><br/> <label for="remember">Запомнить меня:</label> <input type="checkbox" name="remember" /><br/><br/> <input type="submit" name="" value="Submit" /> </form>
Для начала нам понадобится подключить библиотеку jQuery и плагин в страницу:
<script src="../lib/jquery.js" type="text/javascript"></script> <script src="../lib/jquery.delegate.js" type="text/javascript"></script> <script src="../jquery.validate.js" type="text/javascript"></script>
Теперь можно вызывать функцию jQuery.validate() которая инициализирует форму. В качестве атрибута в функцию нужно передать объект, содержащий правила (rules) и сообщения об ошибках (messages) для каждого проверяемого поля:
$().ready(function(){
$("#myForm").validate({
rules : {
username : {required : true, minlength: 2},
password : "required"
},
messages : {
username : {
required : "Введите ваше имя",
minlength : "Введите не менее, чем 2 символа."
},
password : "Введите пароль"
}
});
});
Здесь все довольно таки просто. Селектор $(”#myForm”) получает указатель на форму, а функция validate() устанавливает правила для полей в соответствии с полученными данными. Объект rules содержит имя поля и список правил. Если правил несколько, то они должны быть объединены в отдельный объект. Так, для поля пароль просто указано правило “required”, т.е. обязательное поле, в то время как для поля username указан объект содержащий два правила - required и minlength (минимально допустимое количество символов). Структура объекта messages такая же, как и для rules, за исключением того, что вместо атрибутов правил указаны сообщения об ошибках.
Если при отправке формы обнаружены ошибки, то форма не отправляется, а высвечивается сообщение об ошибке в виде тэга <lable> с классом error. Также класс error присваивается элементу input, вызвавшему ошибку. Воспользуемся этим чтобы ярко выделить это поле:
label.error {
color: red;
font-style: italic;
}
input.error {
border: 1px dotted #f00;
}
Таким образом, сообщения об ошибках будут выделены красным курсивом, а рамка поля, вызвавшего ошибку, будет выделена красной прерывистой линией.
Демо этого примера можно посмотреть здесь.
Правила для полей можно также указывать и при помощи атрибутов полей как в следующем примере:
<input id="email" class="required email" maxlength="40" name="email" />
Еще один полезный атрибут это submitHandler, который позволяет устанавливать обработчик для события отправки формы. Очень удобно если вам, к примеру, нужно создать форму которая передает данные на сервер используя AJAX. Пример:
$("#form").validate({
submitHandler: function(form) {
jQuery(form).ajaxSubmit({
target: "#result"
});
}
});
Теперь поговорим о том, как же пользоваться AJAX при проверке данных. К примеру, довольно распространенный пример, проверка доступности имени пользователя при регистрации. Допустим, у нас есть простейшая форма для регистрации:
<form name="myForm" id="myForm" action="" method="post" style="margin:20px"> <label for="username">Имя пользователя</label>
<input type=”text” name=”username” value=”" />
<label for=”password”>Пароль</label>
<input type=”password” name=”password” value=”" /><br/><br/> <input type=”submit” name=”" value=”Регистрация” /> </form>
Назначим для формы уже известные по предыдущему примеру правила required и minlength, но кроме этого, для поля username добавим правило remote со значением “test.php”. Таким образом мы указываем файл, к которому будет обращаться плагин для проверки данных. В запросе будет передаваться имя поля и его значение, т.е. так: test.php?username=vasia. В ответ скрипт должен вернуть результат проверки, если это false (простое текстовое значение), то высвечивается сообщение об ошибке:
$().ready(function(){
$("#myForm").validate({
rules : {
username : {required : true, minlength: 2, remote : "test.php"},
password : "required"
},
messages : {
username : {
required : "Введите ваше имя",
minlength : "Введите не менее, чем 2 символа.",
remote : "Это имя пользователя занято, выберите другое"
},
password : "Введите пароль"
}
});
});
Демо этого примера доступен здесь.
Еще один момент при работе с сообщениями об ошибках. В данном плагине доступны несколько файлов локализации, которые, при их подключении, добавляют локализованные сообщения об ошибках по-умолчанию. То есть если для какого либо поля вы не укажите сообщение об ошибке, то плагин покажет сообщение по умолчанию. Вы можете сами создать и подключить такой файл. Пример:
jQuery.extend(jQuery.validator.messages, {
required: "Это поле необходимо заполнить",
remote: "Исправьте это поле чтобы продолжить",
email: "Введите правильный email адрес.",
url: "Введите верный URL.",
date: "Введите правильную дату.",
dateISO: "Введите правильную дату (ISO).",
number: "Введите число.",
digits: "Введите только цифры.",
creditcard: "Введите правильный номер вашей кредитной карты.",
equalTo: "Повторите ввод значения еще раз.",
accept: "Пожалуйста, введите значение с правильным расширением.",
maxlength: jQuery.format("Нельзя вводить более {0} символов."),
minlength: jQuery.format("Должно быть не менее {0} символов."),
rangelength: jQuery.format("Введите от {0} до {1} символов."),
range: jQuery.format("Введите число от {0} до {1}."),
max: jQuery.format("Введите число меньше или равное {0}."),
min: jQuery.format("Введите число больше или равное {0}.")
});
Плагин можно скачать здесь. Также к нему имеется документация.
Обновлено: минимальные требования для плагина jQuery-1.2.2.
До встречи!
печать футболок , срочная печать футболок
19 марта 2008 в 12:57
Очень интересная статья.
У меня возник вопрос о проверке имени пользователя. В вашем примере проверка выполняется после нажатия на кнопку “Регистрация”.
Иногда удобнее чтобы эта проверка выполнялась при событии onchange в этом поле. Сделать это обычным способом (без библиотеки) несложно, достаточно написать обработчик. Но можно ли подключить эту функцию к библиотеке, т.е. чтобы при сабмите формы запрос отправлялся с данными из всех полей одному скрипту, а при обновлении поля с именем - другому (и только с данными из указанного поля)?
19 марта 2008 в 16:05
Это мое упущение. На самом деле скрипт так и работает. Т.е. при изменении текста отправляются данные поля username скрипту test.php, как указано в директиве remote, а при сабмите данные идут в другой скрипт. Проблема в том, что у меня на сервере был установлен jQuery-1.2.1, в то время как минимальные требования для плагина это версия 1.2.2.
Спасибо вам за замечание. Уже исправлено.
6 мая 2008 в 23:40
Неразобрался где взять файл delegate.js
По указаному линку
Скачал 1.2.1, потом обновил до 1.2.2, но такого файла в дистрибутиве нет
7 мая 2008 в 10:49
Этот плагин идет отдельно от дистрибутива:
http://dev.jquery.com/browser/trunk/plugins/delegate/jquery.delegate.js?rev=4786
его можно скопировать из моего демо примера:
http://www.jstoolbox.com/js/jquery.delegate.js
15 мая 2008 в 15:29
При использовании Validate натолкнулся на проблему, когда форма обрабатывается только после того, как ДВАЖДЫ нажимаешь на кнопку сабмит.
может быть, проблема в том, что форму я генерю скриптом. стандартным вызовом validate (чере ойгукн document ready) форма не видится. Пришлось в onsubmit формы запихивать функцию, в которой используется validate и отправка через ajax
Самое интересное, что такая бага замечена не только мной - в jquery group такая проблема тоже озвучивалась, но решения нет пока. а может, я что-то не так делаю?
16 мая 2008 в 0:51
Трудно ответить на ваш вопрос не видя код. Если проблема в $.ready() и динамическом создании формы, то почему бы не добавить вызов validate() сразу после того как вы сгенерировали и добавили форму в DOM?
16 мая 2008 в 7:17
форма генерируется после определенного действия юзера, код могу показать, но ссылку общедоступной делать не хочу. пока же лезу на стенку от невозможности определить, где ошибка…
16 мая 2008 в 8:36
ну так покажите код, посмотрим, или вышлите мне на email
16 мая 2008 в 20:21
Приветствую.
Как вывести сообщение возле поля, если валидация прошла успешно? У меня remote проверяет email на сервере, если false то говорит что занято, а как что-то вывести если сервер возвращает true, мол все нормально?
Спасибо.
16 мая 2008 в 21:01
@Бруно Понтекорво
Нужно добавить функцию-обработчик success примерно так:
rules : { … },
messages : { … },
success: function(label) {
var msg = ‘ ’;
if (label.attr(’for’) == ‘username’)
var msg = ‘Имя не занято’;
label.html(msg).addClass(”checked”);
}
В атрибуте for сообщения об ошибке всегда хранится имя поля. Я просто определяю, если это к примеру username, то значит сообщение ‘Имя не занято’. Ну и плюс к этому лейблу добавляю класс checked.
Хороший демо есть тут: http://jquery.bassistance.de/validate/demo/milk/
7 июня 2008 в 21:03
Спасибо за статью, но появился вопрос.
Как работать с массивом полей, т.е.: user[name], user[password] ?
7 июня 2008 в 23:35
@Евгений
Такие поля нужно указывать следующим образом:
rules: {
“user[name]”: “required”,
“user[password]”: “required”
…
}
Кавычки здесь обязательны!
9 июня 2008 в 9:51
А как сделать проверку даты в селектах на правильность. Что бы нельзя было выбрать например 31 сентября 2008 года. (в сентябре только 30 дней)?
9 июня 2008 в 13:31
@Олег
. Разве что самому изменять функцию проверки правильности даты. Я только что посмотрел код, который реализует проверку для дат, оказывается там просто идет проверка по регулярным выражениям. Например, для функции dateISO() стоит проверка следующего выражения:
Увы, но такую проверку пока сделать невозможно
/^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/
т.е. должен быть следующий формат даты: 2008-08-26, причем валидатор скажет что такая запись тоже верна: 2008-36-54, хотя это не так.
Функция date() в свою очередь использует следующее выражение:
!/Invalid|NaN/.test(new Date(value))
… которое также не в состоянии определить “правильность” даты.
Надеюсь в следующем релизе эту недоработку устранят.