Валидатор HTML форм (плагин jQuery — Validatr)

Здравствуйте, уважаемые читатели XoZbloga! В этой статье рассмотрим jQuery плагин для валидации HTML форм — Validatr от автора @jaymorrow. Для работы плагина нам понадобится подключенная библиотека jQuery. Для валидации плагин использует возможности HTML5. А там где это не возможно воспользуется собственными правилами проверки!


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

Подключение

Собственно, для подключение нам необходима jQuery и сам плагин:

<script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>  
<script src="validatr.js" type="text/javascript"></script>

Произвольная HTML форма:

<form action="./">
    ...
    ...
</form>

Остается только выполнить вызов метода validatr для все форм:

<script>  
jQuery(function($) {
    $('form').validatr();
});  
</script>

Выросла посещаемость на сайте, возросла нагрузка и обычного хостинга не достаточно?! Попробуйте виртуальный сервер windows – отличный вариант для ресурсоемких проектов.

Настройка

Теперь пару слов о настройке плагина. Для начала давайте рассмотрим все возможные атрибуты, которые мы можем использовать для полей формы в качестве настроек плагина. Хочу заострить внимание, данные атрибуты используются для полей формы и задаются в разметке HTML.

Атрибут Описание
data-location Положение сообщения об ошибке. Если значение установлено в атрибуте поля, то значения опции указанные в настройках плагина игнорируется. Возможные значения top, left, right, bottom.
data-message Текст сообщения об ошибке.
form Позволяет указать дополнительную форму для валидации. Значением этого атрибута является идентификатор формы, которую необходимо проверять.
required Указывает на то, что поле должно иметь значение.

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

Небольшой пример использования атрибутов:

<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.

Пример использования данных опций:

jQuery('form').validatr({
    location: 'bottom',
    showall: true,
    position: function ($error, $input) {$input.css("color","red");} // разукрашиваем в красный не корректный текст в поле
});

Помимо всего прочего у данного плагина есть различные методы, более подробную информацию по настройке и использованию Вы найдете на сайте автора.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!


Lingualeo