Что это?
- Автоматическая проверка форм HTML типа text|textarea.
- Проверка форм происходит по атрибутам `required` и `pattern` и разработан, преимущественно, для браузеров, не поддерживающих данные атрибуты.
- Встроенный набор шаблонов для быстрого использования.
- Возможность установить обработчик отправки формы на любой HTML элемент по клику как в форме так и за ее пределами.
Ну и зачем?
К сожалению не все браузеры способны поддерживать такие стандартные атрибуты как required и pattern, и к сожалению ни все и не всегда обновляют браузеры до последних версий.
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| required | 10.0 | 5.0+ | 9.6+ | x | 4.0+ | 2.3+ | 3.0+ |
| pattern | 10.0 | 5.0+ | 9.6+ | x | 4.0+ | 2.3+ | 3.0+ |
Ну да! А что делать?
Можно воспользоваться грамотным полифилом jVForms.js, который не займет много места, не нуждается в настройках (только иногда) и выполнит всю грязную работу по проверке форм за Вас.
А как?
Подключите jVForms.min.js в конце документа перед закрывающимся тегом `body` и инициализируйте его.
<script src="jVForms.min.js"></script>
<script>
jVForms.initialize();
</script>
А дальше?
Добавьте атрибут `required=«required»` в поле формы, сделав тем самым элемент обязательным для заполнения.
<input type="text" name="field_1" value="" required="required"/>
HTML required-attribute
Добавьте атрибут `pattern=«RegExp»`, где `RegExp` — ваше регулярное выражение для проверки формы.
<input type="text" name="field_1" value="" required="required" pattern="^\d+$"/>
HTML pattern-attribute
А что такое регулярное выражение?
Если возникли трудности с добавлением регулярного выражения, можно воспользоваться готовым набором шаблонов, просто объявив их в классе.
<input type="text" name="field_1" value="" class="шаблон"/>
Список шаблонов:
- vf-all: Любой символ, не являющийся символом-разделителем
- vf-numInt: Число целое
- vf-numFloat: Число десятичное
- vf-notNum: Не число
- vf-index: Индекс
- vf-wordUpper: Слово на Ru или US в верхнем регистре и знак(-)
- vf-wordLower: Слово на Ru или US в нижнем регистре и знак(-)
- vf-wordRuUpper: Слово на Ru в верхнем регистре и знак(-)
- vf-wordRuLower: Слово на Ru в нижнем регистре и знак(-)
- vf-wordUSUpper: Слово на US в верхнем регистре и знак(-)
- vf-wordUSLower: Слово на US в нижнем регистре и знак(-)
- vf-stringRu: Сторка любая не содержащая US букв
- vf-stringUS: Сторка любая не содержащая Ru букв
- vf-timeHM: Время в формате час: минуты
- vf-dateDMY: Дата в формате день/месяц/год
- vf-dataDMYus: Дата в формате месяц/день/год
- vf-cc: Кредитная карта в формате 9999 9999 9999 9999
- vf-phone: Номер в формате 999 99 99 или 9999999 или 999-99-99 или 999-99 99
- vf-phoneDash: Номер в формате (999) 999-9999 или (999) 999 9999
- vf-phoneAlong: Номер в формате (999) 9999999
Шаблонов можно объявить сколько угодно, но работать будет только первый:
<input type="text" name="field_1" value="" class="vf-numInt vf-wordUSLower vf-dataDMYus otherClass"/>
При объявлении атрибута pattern и класса шаблона, класс шаблона работать не будет:
<input type="text" name="field_1" value="" required="required" pattern="^\d+$" class="vf-numInt"/>
Если атрибут `required=«required»` опущен и добавлен класс шаблона или атрибут `pattern`, то такое поле не является обязательным для заполнения,
но если оно все же будет заполнено, то будет проверено:
<input type="text" name="field_1" value="" class="vf-numInt"/>
Мне не подходит submit!
Для установки обработчика на любой другой элемент в пределах формы, необходимо добавить в него класс vf-submit:
<form>
<input type="text" required="required" name="name" class="vf-numInt"/>
<input type="text" name="phone"/>
<textarea name="area"></textarea>
<span class="vf-submit">Отправить</span>
</form>
Для установки обработчика на любой другой элемент вне формы, необходимо добавить в него класс vf-submit, а также связать этот элемент с формой.
Для этого у формы необходимо указать атрибут id или атрибут name и значение этого атрибута присвоить в виде класса элементу обработчику:
<form id="formId">
<input type="text" required="required" name="name" class="vf-numInt"/>
<input type="text" name="phone"/>
<textarea name="area"></textarea>
</form>
<span class="vf-submit formId" >Отправить</span>
Хочу только ошибки.
jVForms способен менять тип уведомлений при проверке формы, для этого выделено три значения:
- Off: отключить уведомления;
- All: подсвечивать правильные и неправильные поля;
- Error: подсвечивать только неправильные поля;
Значение по умолчанию: «All». Чтобы сменить это значение на «Off», например, необходимо в инициализирующую функцию передать следующее:
<script>
jVForms.initialize({
notice: 'Off'
});
</script>
И что в итоге?
В итоге получили небольшой полифил, который прост как мыло. Сейчас в современных браузерах встроена автоматическая подсветка полей, поэтому при использовании jVForms.js не происходит ни каких конфликтов и визуальных отторжений.
Git: jVForms.js
Спасибо за внимание!
Демонстрация здесь!