Проверка данных форм это чрезвычайно важная процедура для повышения “юзабилити” при работе с формами. В первую очередь потому, что пользователь сразу же получает уведомление в том случае, если какие либо данные введены неверно. Сегодня я расскажу об очень полезном плагине для jQuery, который облегчает задачу проверки введенных данных до минимума. Это jQuery Validation Plugin. Вот некоторые его возможности:

1. Способен проверять значения email, URL, числа, цифры, номера кредитных карт, минимальное и максимальное значения и др.
2. Поддержка удаленной проверки используя AJAX.
3. Автоматическое отображение сообщений об ошибках.

Итак, попробуем скрипт в действии. Допустим, нам необходимо создать простую форму для логина пользователя, в которой есть 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 в категории AJAX, jQuery.Вы можете следить за комментариями используя ленту новостей RSS 2.0.Вы можете оставить комментарий, или отправить trackback со своего сайта.