Валидация форм на сайте с использованием плагина jQuery.validationEngine


Часто при работе с формами требуется проводить простейшую валидацию, просто, что бы не отправляли, пустую форму. Или по простейшему набору:


  • Поле заполнено ли нет;
  • Корректность ввода e-mail по стандартной маске;
  • Только цифры;
  • Только буквы;
  • Что бы не было введено спец символов.

Делать это можно на стороне клиента силами jQuery.


Скриптов для валидации форм существует большое количество, есть просты и понятные или продуманные и сложные. Всегда найти можно что именно вам понравится.

Мне пришелся по нраву jQuery.validationEngine.


Подключение валидации к форме и ее настройка не займет много времени. Для начала качаем свежею версию с GitHub (jQuery-Validation-Engine) ( или jQuery.validationEngine v2.6.2 )

Подключаем стили, jQuery и наш плагин на страницу с формой:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="css/validationEngine.jquery.css">
<script src="js/jquery.validationEngine.js"></script>
<script src="js/jquery.validationEngine-ru.js"></script>

Добавляем нашей форме индификатор что бы объясниться скрипту какую именно форму необходимо обрабатывать

	<form action="#" id="myForm">
	...
	</form>

Далее нужно дать плагину понять что он должен валидировать

	<script type="text/javascript">
		(function($){
			$(document).ready(function(){
				$('#myForm').validationEngine();
			});
		})(jQuery);
	</script>

И самая главная часть, это определить, что именно и как в нашей форме мы будем проверять на корректность внесения данных перед отправкой. Что бы указать, что именно этот элемент формы необходимо проверять к элементу просто добавляем класс validate.


  • class="validate[required] text-input" - Поле обезательно для заполнения
  • class="validate[required,custom[email]]" - В поле должен быть указан только e-mail
  • class="validate[required,custom[phone]]" - В поле должен быть указан только телефон
  • class="validate[required,custom[url]]" - В поле должен быть указан только Url - адрес
  • class="validate[required,custom[onlyNumberSp]]" - В поле должен быть указан только цыфры
  • class="validate[required,custom[onlyLetterNumber]]" - В поле должен быть указан только буквы и цыфры без спец. символов

Более подробнее о возможностях и документацию по jQuery.validationEngine можно почитать на странице проекта

#jQuery

Copyright © 2013-2017