jVForms.js — кроссбраузерный полифил проверки форм

Что это?

1. Автоматическая проверка форм HTML типа text|textarea.
2. Проверка форм происходит по атрибутам `required` и `pattern` и разработан, преимущественно, для браузеров, не поддерживающих данные атрибуты.
3. Встроенный набор шаблонов для быстрого использования.
4. Возможность установить обработчик отправки формы на любой 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

Спасибо за внимание!