Input type email pattern

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

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

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

И стиль :invalid

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

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

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

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

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

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

SVG маска с кликабельным полигоном

Октябрь 12, 2022 г.

Пара примеров, показывающих как сделать элемент svg полезным, например для создания интерактивной маски. Рассмотрим следующий HTML код: [crayon-68f26c7c55d38739652400/] Здесь SVG настроен как "отзывчивый" объект, имеющий логические размеры ...

Читать

Чем заменить drupal_mkdir() в Drupal 10

Февраль 22, 2024 г.

В Drupal 10 множество функций работы с файловой системой было собрано в сервис file_system. В том числе и drupal_mkdir была перенесена туда. В общем случае это выглядит для D10 вот так: [crayon-68f26c7c55f3c566697121/]

Читать

Drupal: как получить список target_id из ссылочного поля без перебора массива

Сентябрь 20, 2025 г.

При работе с сущностями в Drupal нередко возникает задача: из ссылочного поля (entity reference) нужно достать список ID связанных объектов. Например, у нас есть нода с полем field_other_exclusions. Если вывести его содержимое через getValue(), ...

Читать

Показ анимации, что идет загрузка, для обновления контента views в режиме ajax

Май 22, 2021 г.

Подгрузка данных с сервера (например, при изменении параметров фильтра) происходит с небольшой задержкой, потому пользователь может не понять, среагировал как то сайт или нет на его действия. Задача состоит в том, чтобы показать, что идет загрузка ...

Читать
 

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

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



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