Валидация полей формы в HTML с помощью атрибута pattern

Валидация полей формы - это проверка на стороне клиента, т.е. на компьютере пользователя, который пришел к вам на сайт и эту форму заполнил. Она происходит в браузере этого пользователя перед отправкой формы на сервер. Именно браузер за счет добавленных в свое время в HTML5 возможностей обеспечивает первичную проверку. Кроме того, вы можете задействовать еще и JavaScript для улучшения обратной связи с пользователем, что конечно, повышает удобство работы и для пользователя, и для владельца сайта, за счет раннего обнаружения ошибок.

Однако  JavaScript  можно отключить в браузере, поэтому на него не следует на 100% полагаться в плане безопасности, хотя реально его отключает крайне небольшой процент пользователей. С другой стороны, на стороне сервера также обязательно нужно проводить проверку, т.к. ее нельзя обойти, отключив что-либо на своем компьютере. Она может быть медленнее, поскольку сервер должен вернуть свой ответ.

Когда стоит использовать JavaScript для  проверки формы?

Вы можете использовать JavaScript для выполнения более сложных проверок, которые невозможны только с помощью HTML5, например проверки того, занято ли уже имя пользователя. Для этого придется отослать AJAX- или Fetch-запрос с помощью JS, но PHP-скрипт, например, должен будет проверить наличие этого имени в базе данных, и вернуть ответ, который отобразит опять-таки JavaScript. Такая проверка в режиме реального времени, когда пользователь заполняет форму и переходит от поля к полю, очень удобна и наглядна.

Вы также можете использовать JavaScript для настройки внешнего вида и отображения сообщений об ошибках в ходе вашей проверки. Также вы можете задействовать какие-то плагины, которые добавляют маску ввода, например, для телефонов или номеров кредитных карт (см. пример ниже).

Типы полей ввода для "включения" проверки формы

Проверка формы в HTML5 может использоваться для многих типов полей ввода, включая текстовые поля (type="text", "password", "serch", "url"), поля электронной почты (type="email"), числовые поля (type="number") и многое другое. Однако проверка формы HTML5 не поддерживает тип файл (type="file"), поэтому для этого вам придется использовать JavaScript или проверку на стороне сервера.

Зачем нужен атрибут required?

Атрибут required используется , прежде всего, для указания того, что поле ввода должно быть заполнено, прежде чем пользователь сможет отправить форму. Это означает, что проверка будет выполняться, если в форме присутствует <input type="submit"> или <button>, который по умолчанию имеет type="submit". Если у вас в форме почему-то присутствует <input type="button">, то проверки не будет.

Если пользователь попытается отправить форму, не заполнив обязательное поле, браузер отобразит сообщение об ошибке и не позволит отправить форму. Этому атрибуту не требуется значение, вы просто добавляете его в поле ввода следующим образом: <input type="text" name="username" required>. Например, именно этот атрибут не позволит вам отправить форму с полем типа email, если вы не поставите знак @ и не введете несколько символов после него.

В форме ниже при нажатии на кнопку "Проверить" браузер не допустит отправки формы до тех пор, пока вы не заполните поле верно. Однако вы можете пропустить точку и символы после нее, но это уже браузер проверять не будет.

Как настроить сообщения об ошибках при проверке формы

Вы можете настроить сообщения об ошибках, используя метод setCustomValidity() в JavaScript-коде. Этот метод позволяет вам установить собственное сообщение проверки для элемента ввода, для которого вы вызовете этот метод.

Сообщение будет отображаться, если входные данные не проходят проверку. Например:

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

Атрибуты maxlength, min и max

В HTML есть атрибуты, которые будут по умолчанию ограничивать ввод некоторого количества символов или цифр. Например, атрибут maxlength="10" не позволит вам ввести более 10 символов. Попробуйте сами:

Атрибуты min и max  используются для указания минимального и максимального значений для поля ввода типов number, range и date. Если пользователь вводит значение, меньшее значения min или больше значения max, браузер отобразит сообщение об ошибке и предотвратит отправку формы.

В коде это выглядит так:

В браузере вы увидите примерно следующее ( в зависимости от стилей на вашем сайте):

При попытке ввести в поле с type="number" любое число вне указанного диапазона при клике на кнопке "Проверить" вы получите сообщение об ошибке. Ползунок (type="range") вы просто не сможете вывести за пределы диапазона.

Кстати, о стилизации и использовании <input type="range"> можно почитать в отдельной статье.

Используем атрибут pattern (шаблон)

Атрибут pattern представляет собой шаблон, который используется для указания регулярного выражения, по которому проверяется значение поля ввода. Если введенные данные не соответствуют шаблону, браузер отобразит сообщение об ошибке и не позволит отправить форму. Вот пример использования атрибута pattern:

Давайте проверим:

Для валидации телефонного номера мы используем pattern="^\d{4}-\d{3}-\d{4}$", который предполагает, что сначала нужно ввести 4 цифры, потом минус (или дефис), затем 3 цифры, минус и опять 4 цифры.

Допустим, нам нужно, чтобы логин пользователя начинался с заглавной буквы и содержал только латинские символы и цифры. Тогда pattern должен быть таким: ^[A-Z]+[a-zA-Z0-9]+. Знак ^ предполагает, что первая буква будет заглавной, + - что такая буква должна быть, как минимум одна, а дальше следуют символы латинского алфавита и/или цифры.

попробуйте сами:

Аналогичным образом мы можем проверить имя пользователя в Твиттере (теперь сеть X) или в Телеграмме -  они должны начинаться со знака @. Паттерн будет таким: ^@[A-Za-z0-9_]{1,15twitName}$. Вы найдете проверку по нему в первом поле. Однако символы в квадратных скобках можно заменить одним спецсимволов - \w. В этом случае мы имеем атрибут pattern="^@[\w]{1,15}$". Этот паттерн работает для второго поля

Проверяем дважды:

Валидация поля для ввода цвета

Для валидации текстового поля для ввода цвета мы будем использовать pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$". Поскольку цвет в хэшформате предполагает в начале наличие знака  #, то мы должны поставить знак в начале ^. Кроме того, цвет может содержать либо 3 буквы в виде a-f в нижнем или A-F в верхнем регистре и цифры от 0 до 9, либо 6 букв-цифр. Мы определяем это в виде 2-х последовательностей с вертикальным слэшом, который обозначает логическое ИЛИ.

Пример с кредитной картой

Шаблон для ввода цифр в полях кредитной карты в этом примере присутствует во всех полях, где должны быть цифры, но, кроме того, здесь работает плагин Imask, который и позволяет вводить цифры по определенному шаблону.

See the Pen Credit Card Payment Form by Adam Quinlan (@quinlo) on CodePen.

Пример с форматированием валюты

Здесь, с одной стороны, работает атрибут pattern, с другой - проверка и замена в JS-коде на основе регулярных выражений..

See the Pen Currency Format Input Field by Elen (@ambassador) on CodePen.

Разнообразные примеры использования регулярных выражений в JavaScript вы найдете в отдельной статье.

Атрибут novalidate для формы

Атрибут novalidate при проверке формы используется для отключения проверки формы. Если этот атрибут присутствует, браузер не будет выполнять никаких проверок при отправке формы. Это может быть полезно в определенных ситуациях, например, когда вы хотите выполнить всю проверку только на стороне сервера. Однако его следует использовать с осторожностью, поскольку он удаляет удобную для пользователя обратную связь, обеспечиваемую проверкой на стороне клиента.

Поддержка проверки формы в браузерах

Поскольку стандарт HTML5  существует уже довольно давно, то проверка формы поддерживается во всех современных браузерах, включая Chrome, Firefox, Safari и Edge. Она не поддерживается только в Internet Explorer 9 и более ранних версиях, хотя найти их  уже довольно сложно. Если вам необходимо поддерживать эти старые браузеры, то придется использовать JavaScript/jQuery или выполнять проверку на стороне сервера в обязательном порядке.