-
Для кнопки устанавливаем [data-valid-form] , для блок на странице где находятся поля [data-valid-init]
-
В поля, которые нужно проверять добавляем [data-valid-pattern], где указываем имя варианта проверки для поля:
[data-valid-pattern="required|min:{num}|max:{num}|minnum:{num}|maxnum:{num}|letters|letters-space|en|en-space|ru-space|ru|phone|email|checked|nochecked"]
<input data-valid-pattern="required|required-mask|min:{num}|max:{num}|minnum:{num}|maxnum:{num}|letters|letters-space|en|en-space|ru-space|ru|num|num-space|phone|email|checked|nochecked">required - поле не должно быть пустым
required-mask - поле не должно быть пустым (с учетом маски стороннего плагина для этого поля)
min - поле не должно быть меньше числа
max - поле не должно быть больше числа
minnum - поле не должно быть меньше числа
maxnum - поле не должно быть больше числа
letters - только буквы без пробелов
letters-space - только буквы с пробелами
en - только латинские символы без пробелов
en-space - только латинские символы с пробелами
ru - только русские символы без пробелов
ru-space - только русские символы с пробелами
num - только числа
num-space - только числа с пробелами
phone - проверка телефона
email - проверка email
checked - проверка, checkbox включен
nochecked - проверка, checkbox выключен
-
Для того чтобы поле учитывало маску стороннего плагина, в момент когда оно пустое и выводится только маска, необходимо указать в поле атрибут data-valid-pattern="required-mask" и data-valid-mask="+_ (___) ___ __ __".
Где "+_ (___) ___ __ __" - это маска, которая будет выводиться сторонним плагином, в момент, когда поле пустое. -
Если нужно чтобы валидация не начиналась после нажатия на Enter в активном input, то в этото поле ставим attr со значением [data-valid-enter="off"]
<textarea data-valid-pattern="..." data-valid-enter="off"></textarea>- _simple-valid-error - класс, который будет добавляться к полю по умолчанию, если в нем ошибка. Если у поля стоит attr [data-valid-error], то будет добавляться класс указанный в нем вместо _simple-valid-error.
<input data-valid-pattern="..." data-valid-error="custom-error-class">- Для того чтобы выводилось сообщение об ошибке, нужно создать эдемент в любом месте страницы с attr [data-valid-message]:
- для вывода сообщения об ошибке одного поля:
Вариант 1 - Вывод ошибки в html:
<div data-valid-pattern="..." data-valid-message="required for name">Сообщение об ошибке</div>[data-valid-message] - attr в котором указываем required - тип ошибки и name - имя проверяемого поля
Вариант 2 - Вывод ошибки в arr:
<div data-valid-pattern="..." data-valid-message="required for name" data-valid-custom-message="Сообщение об ошибке"></div>[data-valid-message] - attr в котором указываем required - тип ошибки и name - имя проверяемого поля
[data-valid-custom-message] - сообщение об ошибке в attr
Если name проверяемого поля не уникально на странице, то для вывода сообщения, вместо name, можно использовать data-name
- для вывода сообщения об ошибке для совпадающих полей:
Вариант 1
Вывод ошибки в html:
div(data-valid-message="pass") Сообщение об ошибке
[data-valid-message] - attr в котором указываем pass - [data-valid-matches="pass"] - attr в проверяемом поле
Вариант 2
Вывод ошибки в arr:
div.e-message(data-valid-message="pass" data-valid-custom-message="Сообщение об ошибке|data-mega" data-mega)
[data-valid-message] - attr в котором указываем name - имя проверяемого поля
[data-valid-custom-message] - rttr в котором указываем Сообщение об ошибке и после | имя attr, который ноходится в элементе с тектом ошибки, например data-mega
- Здля запуска в JavaScript нужно в обработчик отправки контента разместить следующий код:
if(!simpleValid(this)) {
alert('noValid');
return;
}if(!simpleValid(this)) - сработает в случаи, если поля не прошли валидацию.