Автоматическая проверка форм HTML типа text|textarea.
Проверка форм происходит по атрибутам required
и pattern
и разработан, преимущественно, для браузеров, не поддерживающих данные атрибуты.
Встроенный набор шаблонов для быстрого использования.
Возможность установить обработчик отправки формы на любой HTML элемент по клику как в форме так и за ее пределами.
Подключите 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"/>
[required-attribute] (http://www.w3.org/html/wg/drafts/html/master/forms.html#the-required-attribute)
Добавьте атрибут pattern="RegExp"
, где RegExp
- ваше регулярное выражение для проверки формы.
<input type="text" name="field_1" value="" required="required" pattern="^\d+$"/>
[pattern-attribute] (http://www.w3.org/html/wg/drafts/html/master/forms.html#the-pattern-attribute)
Если возникли трудности с добавлением регулярного выражения, можно воспользоваться готовым набором шаблонов, просто объявив их в классе.
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"/>
Для установки обработчика на любой другой элемент в пределах формы, необходимо добавить в него класс 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>