- PVSM.RU - https://www.pvsm.ru -
К сожалению не все браузеры способны поддерживать такие стандартные атрибуты как 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 [1], который не займет много места, не нуждается в настройках (только иногда) и выполнит всю грязную работу по проверке форм за Вас.
Подключите 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"/>
Добавьте атрибут `pattern=«RegExp»`, где `RegExp` — ваше регулярное выражение для проверки формы.
<input type="text" name="field_1" value="" required="required" pattern="^d+$"/>
Если возникли трудности с добавлением регулярного выражения, можно воспользоваться готовым набором шаблонов, просто объявив их в классе.
<input type="text" name="field_1" value="" class="шаблон"/>
Шаблонов можно объявить сколько угодно, но работать будет только первый:
<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 способен менять тип уведомлений при проверке формы, для этого выделено три значения:
Значение по умолчанию: «All». Чтобы сменить это значение на «Off», например, необходимо в инициализирующую функцию передать следующее:
<script>
jVForms.initialize({
notice: 'Off'
});
</script>
В итоге получили небольшой полифил, который прост как мыло. Сейчас в современных браузерах встроена автоматическая подсветка полей, поэтому при использовании jVForms.js не происходит ни каких конфликтов и визуальных отторжений.
Git: jVForms.js [1]
Спасибо за внимание!
Автор: Lubaev
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/35704
Ссылки в тексте:
[1] jVForms.js: https://github.com/lubaev/jVForms.js
[2] HTML required-attribute: http://www.w3.org/html/wg/drafts/html/master/forms.html#the-required-attribute
[3] HTML pattern-attribute: http://www.w3.org/html/wg/drafts/html/master/forms.html#the-pattern-attribute
[4] Источник: http://habrahabr.ru/post/181782/
Нажмите здесь для печати.