Проверка данных форм - 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.
До встречи!