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/

Loading Disqus Comments ...
Loading Facebook Comments ...

12 thoughts on “JQuery Validation

  1. Денис:

    Помогите разобраться возникло сообщение об ошибке:

    Uncaught TypeError: Cannot call method ‘addMethod’ of undefined

    1. Алексей:

      Рад помочь, но информации мало вы дали. Нужно смотреть код.

    2. Mania:

      Скорее всего это из-за того, что вы подключаете две (или более) библиотеки jQuery. Предполагаю, вы создавали в Visual Studio MVC приложение. Попробуйте при создании вьюшки убирать галочку “Use a layout of masterpage”, а в скрипте у себя подключить нужные скрипты:

  2. Макс:

    Такой вопрос: по определенным причинам я имею форму, в которой инпут выводит массив ( имеет вид
    input type=”text” name=”secondname[]” value=”>)
    как внутри этого скрипта корректно дописать эти самые ‘[‘ ‘ ]’

  3. Ярослав:

    $(“fieldset input”).click(function(){$(“fieldset label.error”).remove()});

    в этой строке выдает ошибку, что нельзя индифицировать функцию remove

  4. Ольга:

    Помогите, пожалуйста. При использовании данного плагина, почти все ок. 1 проблема – в IE8 плывут текстбоксы. Когда отправляешь пустую форму, происходит вывод ошибок и подсвечивание красной рамкой полей. Однако при вводе текста в них текстбоксы могут уплыть под соседние, или края просто исчезнуть. Такая проблема наблюдается только в IE 8, хотя в IE7 вообще не работает нормально. 2 проблема – подсвечивает не все текстбоксы сразу. При наведении мыши на чекбокс, который должен быть подсвечен тоже, он сразу обводится красным.

    1. Алексей:

      Плагин тут уже не причем. Вам редактировать css стили уже надо.

  5. Помогите разобраться возникло сообщение об ошибке:

    Uncaught TypeError: Cannot call method ‘addMethod’ of undefined

    1. Алексей:

      Рад помочь, но информации мало вы дали. Нужно смотреть код.

  6. Tutanhamon:

    Валидация имеет свои особенности и тонкости. Все очень сильно зависит от задач. Так, например, если формы не используют html тег “form”, что особенно характерно для приложений с кучей скриптов, то большинство плагинов попросту не обработают формы на div-ах. Так же все зависит еще от способа валидации. Например, на многих формах просят указать поле Url. С одной стороны, поле не обязательное. С другой стороны, если пользователь его заполняет, то такое поле так же необходимо проверять на валидность. Ведь кривой Url в последующем может привести к ошибкам. Если интересно, то более подробно об этом можно узнать в обзоре по адресу http://ida-freewares.ru/validatsiya-polej-proizvolnykh-form-i-kontejnerov-na-jquery.html

    1. Спасибо за интересную информацию! Попробовал эту валидацию на новом проекте – очень понравилось данный подход, когда поле заполнено, и оно проверяется на правильность.

Добавить комментарий для Макс Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *