22 Фев
Когда вы собираете информацию от посетителей сайта через форму, обязательно нужно применять некоторые виды проверки. Не выполнение этого условия может привести к потере клиентов, мусорным данным в вашей базе данных или даже уязвимостям безопасности вашего сайта. К счастью, HTML5 дает нам ряд функций, которые могут обеспечить большую часть ваших потребностей в проверке – валидация форм html . Формы в HTML5 имеют встроенную поддержку проверки через использование специальных атрибутов и новых типов ввода, а также предоставляют много контроля над стилями с помощью CSS.
Специальные типы для полей ввода (тэга input)
HTML5 предоставляет множество типов ввода. Они могут использоваться для создания полей ввода, которые будут принимать только указанный тип данных.
colordatedatetimedatetime-localemailmonthnumberrangesearchteltimeurlweek
Чтобы использовать один из новых типов, укажите их значение в атрибуте type:
<input type="email" />Если браузер не поддерживает указанный тип ввода, поле будет вести себя как обычное текстовое поле. Также стоит знать, что некоторые поля ввода (например, “email” и “tel”) вызовут на мобильных устройствах специализированные клавиатуры с ограниченным набором клавиш, а не полной клавиатурой QUERTY.
Атрибут required для обязательных полей
Просто добавив атрибут “required” для <input>, <select> или <textarea>, вы сообщаете браузеру, что в это поле необходимо ввести значение. Можно сказать, что это то же самое, что мы видим в большинстве форм регистрации – помеченных красной звездочкой *.
<input type="checkbox" name="terms" required />Проблема здесь заключается в том, что практически любые данные будут удовлетворять этому требованию – например, вы можете обойти его с помощью пустого пространства (пробел).
Когда вы устанавливаете атрибут required для поля email или url, браузер ожидает, что будет следовать определенный шаблон, но он очень примитивный и допустимыми считаются такие email-адреса, как “z@zz“.
Ограничения символов
Мы можем установить базовые ограничения, такие как максимальную длину и минимальное и максимальное значение для числовых полей. Чтобы ограничить длину полей ввода и текстовых областей, используйте атрибут “maxlength“. Это не позволит ввести строку, длиннее чем значение “maxlength” заданное для поля input. Если вы попытаетесь вставить строку, которая превышает это ограничение, форма просто обрежет ее.
<input type="text" name="name" required maxlength="15" />Поля типа <input type=”number”> используют атрибуты “max” и “min“, чтобы создать диапазон возможных значений – в нашем примере мы установили минимальный возраст 18 лет.
<input type="number" name="age" min="18" required />Стилизация. Валидация форм html
Псевдо-классы CSS3 позволяют нам стилизовать любое поле формы в зависимости от его состояния.
:valid:invalid:required:optional:in-range:out-of-range:read-only:read-write
Это означает, что вы можете создавать различные стили для обязательных и необязательных полей.
В нашем примере мы объединили селекторы “valid” и “invalid” с псевдо-классом “focus“, чтобы изменять цвет поля формы на зеленый или красный, когда пользователь выбирает его и начинает печатать.
input:focus:invalid,
textarea:focus:invalid{
border:solid 2px #F5192F;
}
input:focus:valid,
textarea:focus:valid{
border:solid 2px #18E109;
background-color:#fff;
}Подсказки. Валидация форм html
Как вы, возможно, заметили, когда вы пытаетесь отправить форму, которая не заполнена правильно, появляется всплывающее окно. Установив атрибут “title” для наших полей, мы можем добавить дополнительные подсказки о том, какие значения ожидаются при проверке наших правил.
Обратите внимание, что различные браузеры отображают всплывающие окна по-разному. В Chrome значение атрибута title будет отображаться под основным текстом сообщения об ошибке меньшим шрифтом. В Firefox ваш текст подсказки не отображается вообще, если вы не использовали атрибут “pattern“, который затем принимается в качестве информации о шаблоне.
<input type="text" name="name" title="Please enter your user name." />Текст ошибки или ее стандартное содержимое не могут быть изменены так просто и требуют помощи JavaScript.
Использование атрибута pattern
Атрибут pattern применим только к элементу input. Он позволяет нам определить собственное правило для проверки значения ввода с помощью регулярных выражений (RegEx). Если значение не соответствует заданному шаблону, ввод будет выдавать ошибку.
Например, предположим, у нас есть поле ввода имени пользователя в нашей форме. Нет стандартного типа для имени пользователя, поэтому мы используем стандартный тип ввода текста:
<form action="somefile.php">
<input type="text" name="username" placeholder="Username" />
</form>Давайте определим правило, которое будем использовать с помощью атрибута pattern. В этом случае мы укажем, что имя пользователя должно состоять только из строчных букв; без заглавных букв, цифр или других специальных символов. Кроме того, длина имени пользователя не должна превышать 15 символов. В RegEx это правило может быть выражено как [a-z]{1,15}.
Добавим [a-z]{1,15} в качестве значения атрибута pattern в наш ввод имени пользователя:
<form action="somefile.php">
<input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}">
</form>Теперь, поскольку он принимает только строчные буквы, отправка любого другого значения вызовет сообщение об ошибке:
Как вы видите выше, сообщение об ошибке говорит “Пожалуйста, соответствуйте запрошенному формату.” Таким образом, наша проверка работает, но это сообщение не помогает нашим пользователям понять, каким должен быть запрошенный формат. Неудача в UX.
Замена стандартного сообщения проверки HTML5
Теперь давайте заменим стандартное сообщение “Please match the requested format” на полностью персональное сообщение. Для этого мы будем использовать немного JavaScript.
Начнем с добавления идентификатора к элементу input, чтобы можно было его удобно выбирать.
<form action="somefile.php">
<input
type="text"
name="username"
placeholder="Username"
pattern="[a-z]{1,15}"
id="username">
</form>Теперь мы можем выбрать элемент ввода с помощью JavaScript и назначить его переменной (это можно сделать между тегами <script> на нашей странице или в отдельном файле JavaScript)
var input = document.getElementById('username');Наконец, мы указываем сообщение, которое будет использоваться, когда ввод находится в недопустимом состоянии.
input.oninvalid = function(event) {
event.target.setCustomValidity('Username should only contain lowercase letters. e.g. john');
}Событие oninvalid наследует объект события, который содержит несколько свойств, включая свойство target (неверный элемент) и свойство validationMessage, которое содержит текстовое сообщение об ошибке. В приведенном выше примере мы переопределили текст сообщения с помощью метода setCustomValidity(). Теперь мы должны увидеть, что наш текст заменяет значение по умолчанию.
Стилизация состояний валидации
воспользуемся псевдо-классами :valid и :invalid. Они позволяют нам применять стили в зависимости от состояния валидности ввода, например:
input:invalid {
border-color: red;
}
input,
input:valid {
border-color: #ccc;
}Есть несколько вещей, о которых следует помнить при использовании этих псевдо-классов:
Во-первых, псевдо-класс :valid применяется по умолчанию, даже если значение ввода пустое. Таким образом, как видно выше, мы устанавливаем цвет границы равным #ccc; это цвет по умолчанию, заданный для нашего элемента ввода. Пустое значение всегда считается допустимым, если мы не добавили атрибут required. В этом случае ввод недопустим, и устанавливается красный цвет границы. Стили valid и invalid применяются в реальном времени, когда пользователь вводит данные, даже когда значение пустое. Мгновенные изменения стиля могут сбить пользователей с толку.
Стили по умолчанию в различных браузерах. Валидация форм html
HTML5 форма валидации является новым стандартом в соответствии с спецификацией HTML5, однако то, как появляется всплывающее сообщение об ошибке, полностью зависит от производителя браузера. Ожидайте различных эстетических решений в разных браузерах.
Несколько лет назад Google Chrome предотвратил возможность настройки стилей стандартного всплывающего окна. Если вы хотите добиться этого, то единственный вариант – полностью переопределить сообщение всплывающего окна с помощью JavaScript.
Заключение. Валидация форм html
В заключение, HTML5 формирует основу для простой и мощной валидации форм. Для разработчиков это означает уменьшение необходимости в JavaScript для базовой валидации, а для пользователей – лучшую обратную связь и улучшенный UX. Кроме того, с помощью псевдо-классов и других CSS свойств, мы можем легко стилизовать элементы в зависимости от их текущего состояния, что дает еще больше возможностей для красивого и интуитивно понятного интерфейса. Однако следует помнить, что стандартные стили для ошибок валидации могут отличаться в разных браузерах, поэтому при желании кастомизировать их, потребуется использование JavaScript. В целом, использование HTML5 валидации форм – это удобный, простой и надежный способ сделать формы на сайте более пользовательскими и функциональными.
Александр Сокирка
