Input type email pattern

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

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

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

И стиль :invalid

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

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

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

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

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

Написать комментарий

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

Удалить из head сайта на WP prefetch //s.w.org

Ноябрь 10, 2017 г.

После очередного обновления движка WP, в секции head шаблона появилась линка на s.w.org: [crayon-6570ea71e4cb5574160004/] Что это такое и как удалить читайте далее в статье. Dns-prefetch - это способ ускорить загрузку страницы с помощью предварительного ...

Читать

Ноу Хау или добавление Wysiwyg + MCEditor в Drupal

Декабрь 2, 2009 г.

Установка и настройка софта обычно процесс простой и незатейливый. Тем не менее масса публикаций в интернете посвящена именно тому что и как настраивать. Всё это многообразие объясняется порою двумя словами - know how - или, по-русски, надо "знать как". ...

Читать

 

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

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



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