Шпаргалка: простая валидация форм в HTML5

Шпаргалка: простая валидация форм в HTML5

От автора: Когда вы собираете информацию от пользователей с помощью формы, использование хоть какой-то валидации данных является обязательным моментом. Если не обратить внимание на данный момент, то это может привести к потере покупателей, порче данных в базе данных (БД) и даже к появлению брешей в безопасности вашего веб-сайта. Так исторически сложилось, что валидация форм всегда вызывала головную боль. На стороне сервера это осуществить легче благодаря полноценным фреймворкам, которые сделают все за вас, но на стороне клиента это чаще всего заканчивается использованием JavaScript библиотек, которые отнимают немало усилий для их интеграции.

скачать исходникидемо

К счастью, HTML5 предоставляет несколько возможностей, которые способны решить большую часть вопросов, связанных с валидацией форм. Формы в HTML5 теперь имеют встроенную поддержку для валидации через использование специальных атрибутов и новых типов элемента input. А это также дает вам больше контроля над оформлением форм через CSS.

Посмотрите на онлайн-пример валидации формы и прочитайте небольшую шпаргалку по основам валидации форм в HTML5.

Специальные типы элемента Input

В HTML5 представлены несколько новых типов элемента input. Они могут быть использованы для создания полей ввода, которые будут принимать только определенный вид данных. Вот новые типы, которые появились в HTML5:

color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week

Чтобы использовать один из новых типов, укажите его название в качестве значения у атрибута type:

<input type="email"/>

Если браузер не поддерживает данный тип элемента input, то текущий элемент будет вести себя, как обычное текстовое поле ввода. Также, вам будет полезно узнать о том, что некоторые типы полей (например, «email» и «tel») приводят к открытию на мобильных устройствах специальных клавиатур с ограниченным набором клавиш, а не полной раскладки QWERTY. Более подробную информацию обо всех типах элемента input вы найдете на сайте MDN – здесь.

Обязательные поля

Простое добавление атрибута «required» для элемента input, select или textarea сообщит браузеру о том, что у данного поля должно быть значение. Воспринимайте это, как красную звездочку*, которую мы видим в большинстве регистрационных форм.

<input type="checkbox" name="terms" required >

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

Когда вы указываете атрибут required для полей типа email или url, браузер ожидает наличия определенного шаблона, по которому он сможет проверить информацию, но подобная проверка очень снисходительна и пропускает e-mail адреса вроде «z@zz» (читайте далее, чтобы узнать, как с этим бороться).

Лимиты

Мы можем установить базовые ограничения, такие как максимальная длина или минимальное и максимальное значение для числовых полей. Чтобы ограничить длину элементов input или textarea, используйте атрибут «maxlength». Это делается для того, чтобы вообще нельзя было ввести строку длиннее, чем значение атрибута «maxlength». Если вы попробуете вставить строку, которая превышает лимит, то форма просто обрежет ее.

<input type="text" name="name" required  maxlength="15">

Поле input type=”number” использует атрибуты «max» и «min» для создания диапазона возможных значений. В нашем демо-примере мы задали минимальный возможный возраст равный 18 (очень плохо, что в Интернете вы можете быть любого возраста).

<input type="number" name="age" min="18" required>

Оформление

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;
}

Всплывающие подсказки

Вы наверняка замечали, что когда вы пытаетесь отправить неправильно заполненную форму, появляются всплывающие подсказки. Задав для наших полей атрибут «title» мы можем добавить дополнительные подсказки о том, каких значений наши правила валидации ожидают от пользователя.

Обратите внимание на то, что разные браузеры по-своему отображают всплывающие подсказки. В браузере Chrome значение атрибута title появится под основным текстом сообщения об ошибке и будет иметь меньший размер шрифта, чем текст об ошибке. Браузер Firefox вообще не будет отображать ваш текст для всплывающей подсказки до тех пор, пока вы не будете использовать атрибут «pattern», который будет использован для информации о шаблоне.

<input type="text" name="name" title="Пожалуйста, введите ваше имя пользователя.">

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

Шаблоны

Атрибут «pattern» позволяет разработчикам указывать регулярные выражения, которые браузер будет сопоставлять с введенными пользователем данными (перед непосредственной отправкой формы). Это дает нам уверенный контроль над вводимыми данными, т.к. регулярные выражения могут быть довольно сложными и точными. Чтобы узнать больше о регулярных выражениях, прочтите нашу статью «Изучите регулярные выражения за 20 минут».

А теперь, когда у нас есть возможность фильтровать вводимые значения, в нашем примере форма принимает только полные e-mail адреса и пароль, состоящий минимум из 8 символов, включая, как минимум, одну цифру. Вот как это использовать:

<input type="email" name="email" required pattern="^\S+@\S+\.\S+$" title="Введите email">

Мы надеемся, что эта небольшая шпаргалка помогла вам познакомиться с возможностями валидации форм в HTML5. Спасибо за чтение!

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree