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

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

Что это?

  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

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

Автор: Lubaev

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js