JQuery Validation

Проверка форм на заполненность нужных полей – одна из важных составляющих в работе сайта. Смысл проверки полей формы сводится к тому, что пользователь сразу на странице получает информацию о том, какие поля не заполнены, какие заполнены, но не правильно (e-mail, телефонные номера, url и пр.) Для таких случаев очень полезно использовать плагин jQuery Validation Plugin, который умеет проверять форму на корректность заполенных данных.

Особенностями jQuery Validation Plugin являются:

• проверка URL и E-mail;
• проверка кредитных карт;
• проверка  максимальных и минимальных значений, диапазонов чисел, дат;
• поддержка удаленной проверки, используя AJAX;
• Автоматическое отображение ошибок.

Рассмотрим работу плагина на примере.

Дана форма с полями: имя, email, сообщение и 3 флажками и кнопкой "Отправить".

Код форы приведен ниже

<form method="post" action="/" id="form1" name="form1">
	<label>Имя:</label> <input type="text" minlength="1" size="25" value="" name="yourname" /><br/>
	<label>E-mail:</label> <input type="text" minlength="1" size="25" value="" name="yourmail" /><br/>
	<label>Телефон:</label> <input type="text" size="25" value="" name="phone" /><br/>
	<label>Тема:</label> <input type="text" size="25" value="" name="theme" /><br/>
	<textarea rows="10" cols="50" name="msg" /></textarea>
	<fieldset>
		<legend>Откуда вы о нас узнали?</legend>
		<input type="checkbox" value="Из сети" name="checkbox1" id="checkbox1" />&nbsp;<label for="checkbox1">Из сети</label><br/>
		<input type="checkbox" value="Обновление коллекции" name="checkbox2" id="checkbox2" />&nbsp;<label for="checkbox2">Обновление коллекции</label><br/>
		<input type="checkbox" value="Другие источники" name="checkbox3" id="checkbox3" />&nbsp;<label for="checkbox3">Другие источники</label>
	</fieldset>
	<input type="submit" value="Отправить" name="Submit"/>
</form>

Подключаем библиотеки jQuery и плагин на страницу: (библиотеки можно скачать с официальных сайтов, ссылки приведены внизу статьи)

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>

Далее необходимо сделать инициализацию формы, вызвав функцию $("#form1").validate()

Также в качестве атрибутов для функции необходимо указать правила (rules), сообщения об ошибках (messages) и место (errorPlacement), где будет выведена ошибка.

$(document).ready(function() {
						   
	$.validator.addMethod("validcb1", function(value){
		if ($("input:checked").length > 0) return true
		else return false;
	},"");
	
	$("fieldset input").click(function(){$("fieldset label.error").remove()});
	
	$("#form1").validate({
		rules: {
			yourname: {
				required: true,
				minlength: 2
				}, 
			phone: "required",
			theme: "required",
			yourmail: {
				required: true,
				email: true
			},
			checkbox3:{validcb1:true},
			msg: "required"
		},
		messages:{
			yourname:{
				required: "поле не заполнено или заполнено не верно",
				minlength: "в поле должно быть минимум 2 символа",
			},
			msg: "поле не заполнено или заполнено не верно",
			phone: "поле не заполнено или заполнено не верно",
			theme: "поле не заполнено или заполнено не верно",
			checkbox3: "отметьте один из флажков",
			yourmail: "поле не заполнено или заполнено не верно"
		},
		errorPlacement: function(error, element) {
			if (element.attr("name") == "yourname") error.insertAfter($("input[name=yourname]"));
			if (element.attr("name") == "msg") error.insertAfter($("textarea[name=msg]"));
			if (element.attr("name") == "phone") error.insertAfter($("input[name=phone]"));
			if (element.attr("name") == "theme") error.insertAfter($("input[name=theme]"));
			if (element.attr("name") == "checkbox3") error.insertAfter($("fieldset label:last"));
			if (element.attr("name") == "yourmail") error.insertAfter($("input[name=yourmail]"));
		}	
	});
})

Вызов $(“#form1”).validate для form1 устанавливает правила (rules) для полей, содержащее имя поля и список правил. Правила могут быть объединены в отдельную группу. Так для yourname установлено одновременно 2 правила – required и minlength. required означает, что поле обязательно, а minlength:2, что минимальная длина должна быть 2 символа.

Для группы флажков (checkbox) установить стандартные правило так просто не получится. В данном примере поступили следующим образом: для одного из флажков определяется правило validcb1:true. В данном примере выбран флажок с именем checkbox3. Далее пишем собственную процедуру валидации validcb1, используя addMethod (с помощью addMethod можно создать собственную процедуру проверки, она должна содержать имя – допустимый идентификатор Javascript). Далее в ней проверяем чекбоксы и если один из них выбран, то данная группа прошла проверку.

$.validator.addMethod("validcb1", function(value){
		if ($("input:checked").length > 0) return true
		else return false;
	},"");

Текст ошибки указывается в правиле messages. Если для поля установлено одновременно 2 правила, то для каждого их них в messages необходимо указать также 2 текста ошибки, которые будут выведены, если поле не соответствует выбранному правилу.

Если в форме обнаруживаются ошибки, то они выводятся ниже этого поля. Место ошибки определяется в правиле errorPlacement. Ошибка заключается в тег label с классом error и полю ввода также присвается класс error, этим можно воспользоваться, чтобы визуально выделить ошибку, используя правила css.

Исходники примера можно скачать здесь, демо тут

Плагин имеет локализацию на 36 языках.

Полное описание находится тут: http://docs.jquery.com/Plugins/Validation

Скачать можно тут: http://bassistance.de/jquery-plugins/jquery-plugin-validation/