Здравствуйте, уважаемые читатели XoZbloga! В этой статье рассмотрим jQuery плагин для валидации HTML форм — Validatr от автора @jaymorrow. Для работы плагина нам понадобится подключенная библиотека jQuery. Для валидации плагин использует возможности HTML5. А там где это не возможно воспользуется собственными правилами проверки!
Фактически, благодаря этому плагину Вы можете настроить под себя стандартную HTML5 валидацию: изменить текст предупреждений, визуальное оформление предупреждений их расположение и тд.
Подключение
Собственно, для подключение нам необходима jQuery и сам плагин:
1 2 | <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script> <script src="validatr.js" type="text/javascript"></script> |
Произвольная HTML форма:
1 2 3 4 | <form action="./"> ... ... </form> |
Остается только выполнить вызов метода validatr для все форм:
1 2 3 4 5 | <script> jQuery(function($) { $('form').validatr(); }); </script> |
Выросла посещаемость на сайте, возросла нагрузка и обычного хостинга не достаточно?! Попробуйте виртуальный сервер windows – отличный вариант для ресурсоемких проектов.
Настройка
Теперь пару слов о настройке плагина. Для начала давайте рассмотрим все возможные атрибуты, которые мы можем использовать для полей формы в качестве настроек плагина. Хочу заострить внимание, данные атрибуты используются для полей формы и задаются в разметке HTML.
| Атрибут | Описание |
| data-location | Положение сообщения об ошибке. Если значение установлено в атрибуте поля, то значения опции указанные в настройках плагина игнорируется. Возможные значения top, left, right, bottom. |
| data-message | Текст сообщения об ошибке. |
| form | Позволяет указать дополнительную форму для валидации. Значением этого атрибута является идентификатор формы, которую необходимо проверять. |
| required | Указывает на то, что поле должно иметь значение. |
Валидатор работает со всеми типами полей формы, логика которых подразумевает проверку. Например при использовании текстовых полей необходимо прописывать собственные правила валидации в виде регулярных выражений указанных в атрибуте pattern.
Небольшой пример использования атрибутов:
1 2 3 4 5 6 7 8 9 | <form action="./"> <input type="email" id="email" name="email" data-location="bottom" data-message="Так не пойдет! Нужен корректный адрес!" required> </form> |
Переходим к рассмотрению опций плагина, используемых при его инициализации в jQuery.
| Название | Тип | По-умолчанию | Описание |
| dateFormat | Строка | ‘yyyy-mm-dd’ | Любая комбинация mm, dd, и yyyy с разделителями /, — или . |
| location | Строка | right | Положение сообщения об ошибке, поддерживаемые значения top, left, right, bottom. |
| position | Функция | function ($error, $input) {} | Указанная функция на входе получает 2 параметра, jQuery элемент выведенного сообщения об ошибке (error) и поле на форме с ошибкой (input). |
| showall | Булево | false | Показать все сообщения об ошибках сразу при отправке данных формы. |
| template | Строка |
{{message}}
|
Формат сообщения об ошибке. Можно использовать HTML и свое стилевое оформление. Обязательна заглушка {{message}}, вместо нее подставляется непосредственно текст сообщения об ошибке. |
| theme | Строка | ‘ ‘ | Названия классов CSS, добавляемых к HTML разметке сообщения об ошибке. Если не указано используется предопределенный стиль. Изначально могут использоваться 2 темы: bootstrap и jqueryui. |
| valid | Функция | $.noop | Функция, которая вызывается после успешной проверки формы. Для предотвращения действие по умолчанию (отправки формы) использовать Return false. |
Пример использования данных опций:
1 2 3 4 5 | jQuery('form').validatr({ location: 'bottom', showall: true, position: function ($error, $input) {$input.css("color","red");} // разукрашиваем в красный не корректный текст в поле }); |
Помимо всего прочего у данного плагина есть различные методы, более подробную информацию по настройке и использованию Вы найдете на сайте автора.
Источник статьи/урока: https://xozblog.ru