Плагин jQuery Validation для валидации форм

Как получить список стран для HTML формы

От автора: приветствую вас, друзья. В этой статье мы с вами познакомимся с одним из наиболее популярных решений для проверки форм. Речь идет о плагине jQuery Validation для валидации форм. Начнем?

Исходные файлы текущей статьи вы можете скачать по ссылке.

Валидация форм и проверка их полей на соответствие определенному формату и наличие определенных данных — это фактически стандартная задача при работе с формами на сайте. Решить ее можно различными способами и средствами.

Можно воспользоваться новыми возможностями HTML5, которые позволяют задавать тип полям и даже использовать регулярные выражения для проверки введенных данных. Можно использовать один из многочисленных плагинов для валидации форм. Можно написать собственный скрипт для валидации.

В этой статье мы с вами воспользуемся вторым вариантом и используем возможности плагина jQuery Validation и поработаем со следующей формой:

Как обычно, начнем со скачивания и подключения плагина. Плагин можно скачать с GitHub или взять из исходников к статье. Подключаем плагин после библиотеки jQuery:

<script src="jv/dist/jquery.validate.js"></script>

Осталось лишь инициализировать плагин, чтобы он начал работать. Для этого достаточно вызвать метод validate() для формы, которую необходимо проверить:

$(function(){
	$('#form').validate();
});

Попробуем проверить работу плагина jQuery Validation:

Как видим, он работает. Для плагина достаточно атрибута required, чтобы он не пропускал пустое поле. При этом плагин также отлично понимает типы полей. Например, если в поле email мы введем строку, не соответствующую формату email, плагин уведомит нас, причем в режиме онлайн:

Осталось лишь немного настроить jQuery Validation, чтобы получилось законченное решение. Что меня смущает? Во-первых, неплохо было бы видеть переведенные сообщения об ошибках или даже текст ошибок, который хочу видеть я. Ну и, во-вторых, хотелось бы подсветить красным проблемные поля.

Для решения первого вопроса передадим в метод validate() объект messages с текстом ошибки. Добавим необходимые сообщения:

$(function(){
	$('#form').validate({
		rules: {
			name: {
				required: true,
				minlength: 2
			}
		},
		messages: {
			name: {
				required: "Поле 'Имя' обязательно к заполнению",
				minlength: "Введите не менее 2-х символов в поле 'Имя'"
			},
			email: {
				required: "Поле 'Email' обязательно к заполнению",
				email: "Необходим формат адреса email"	
			},
			url: "Поле 'Сайт' обязательно к заполнению"
		}
	});
}); 

Обратите внимание, для каждого варианта валидации можно добавить свое сообщение. Также мы использовали объект rules, позволяющий добавить правила валидации для того или иного поля. Проверим, как работает проверка формы теперь.

Отлично! Все работает. Осталось подсветить красным цветом проблемные поля и сообщения. Для этого добавим несколько простейших стилевых правил:

input.error {
	border: 1px solid #ff0000;
}
label.error {
	color: #ff0000;
	font-weight: normal;
}

Ну вот и все. На этом данную статью можно завершать. Если вас интересует тема валидации форм, рекомендую посмотреть этот урок. На этом все. Удачи!

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree