Input type email pattern

В статье рассмотрим некоторые кейсы, связанные с полем email, и подберем шаблон для проверки <input type=email> поля.

Немного теории. Атрибут pattern тега input позволяет использовать регулярные выражения для быстрой валидации значения поля. Результатом валидации поля является присвоение контейнеру input псевдо-классов :valid и :invalid.

Рассмотрим следующий шаблон:

И стиль :invalid

Результат очевиден: eсли поле содержит значение не подходящее шаблону, поле получит красную рамку.

Шаблон не плох, но поле изначально будет иметь статус :invalid, т.к. не учтен кейс, когда значение поля не задано. Также не удобно, что валидация срабатывает сразу, до какой либо активности со стороны пользователя.

Если первое замечание довольно легко поправить, то второе можно реализовать только с дополнительной js обвязкой.

Реализуя первое замечание, приведу еще один вариант шаблона, который мне больше нравится из за своей краткости:

Он менее строгий; а пустое значение — валидное. Очевидно, что приведенные фильтры не соответствует строго спецификациям. А также если поле имеет признак required, то пустое значение всё равно будет расцениваться на :invalid.

Мало букафф? Читайте есчо !

Как в PHP сделать буквы заглавными?

Сентябрь 13, 2016 г.

PHP обладает целым арсеналом работы со строками. Сделать буквы заглавными или наоборот перевести в строчные - нет ничего проще. Базовый набор функций для работы со строками содержит такие функции как: string strtolower ( string $string ); - ...

Читать

Drupal checkbox field form API

Март 18, 2024 г.

Drupal интерпретирует чекбокс как integer. Это вызывает некоторое непонимание при работе с полем через Drupal form API. Давайте рассмотрим пример объявления и чтения данных поля формы. Объявление checkbox поля в вашей форме: [crayon-68e71b45b6cf6808433503/] ...

Читать

Ajax в WP

Июль 12, 2017 г.

Посмотрим в данном гайде как сделать обработку ajax запроса на Wordpress. WP предоставляет два hook-а для подключения PHP обработчика к ajax запросу. ...

Читать

Перебор изображений R.drawable

Ноябрь 21, 2022 г.

Рассмотрим как организовать перебор коллекции ресурсов в Kotlin на примере R.drawable. Типичная задача заключается в том, чтобы отфильтровать элементы коллекции по имени и вернуть список целочисленных идентификаторов, соответствующих вашим критериям. ...

Читать
 

Комментарии к «Input type email pattern»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: