Input type email pattern

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

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

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

И стиль :invalid

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

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

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

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

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

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

Отправка HTML писем из Drupal 7

Август 27, 2015 г.

В семерке поменяли кое что в плане отправки писем, и то что работало в 6ке, в 7ке уже «не катит». Разберем два аспекта отправки писем: HTML формат письма ...

Читать

Создание патча для модуля Drupal

Декабрь 4, 2017 г.

В Drupal для решения ваших задач вы подбираете contributed модули. Отлично, если модуль поддерживается автором, в нем нет багов и есть нужный вам функционал. В противном случае, вы, возможно, правите модуль и используете его для себя. Но, наверное, было ...

Читать

Пример параллельной многопоточной обработки данных в C#

Август 5, 2020 г.

Чтобы продемонстрировать насколько элегантно С# позволяет организовать параллельные вычисления, реализуем классическую задачу поиска простых чисел в заданном диапазоне множества натуральных чисел. Для начала, я создам функцию-расширение для класса ...

Читать

Перезапись ветки данными из origin

Ноябрь 8, 2018 г.

Когда что то не просто пошло не так, а зашло слишком далеко, как восстановить состояние из удаленного репозитория (origin)? Я прибегаю к этому методу, если эксперименты в очередной раз зашли в тупик, а [crayon-687ae6dd93e68092166221/] требует ...

Читать
 

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

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



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