Главная

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

2013-06-01 в 16:03, admin, рубрики: html, javascript, валидация html-форм, метки: javascript, валидация html-форм

Что это?

Автоматическая проверка форм 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

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

Автор: Lubaev

Источник