Валідація форм засобами HTML5

Введення

Використовуючи форми в HTML5, Ви часто використовуєте методи перевірки (валідації) даних, адже їх ігнорування може призвести: до втрат користувачів, до сміття в базі даних або до взлому сайту. Історично склалося, що створення форм із гарною валідацією – складне завдання.

В HTML5 є інструменти оброблення даних для форм, з їх допомогою можна проводити валідацію, що включає в себе спеціальні атрибути і нові типи вхідних даних. Давайте розберемо їх детальніше.

1. Спеціалізовані типи вхідних даних

HTML5 містить кілька нових типів введення. Вони використовуються для створення поля введення, що приймає тільки певні типи даних.

Нові типи вхідних даних виглядають наступним чином:

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

Приклад:

Якщо браузер не підтримує даний тип введення, поле поводитиметься як звичайне поле введення тексту.

2. Обов’язкові поля для заповнення

Просто додавши атрибут "required"до <input>, <select> або <textarea>, Ви кажете браузеру, що значення має бути заповнене.

3. Ліміти

Ми можемо встановити деякі обмеження та ліміти, наприклад, максимальні та мінімальні значення для числових полів. Щоб обмежити довжину поля введення, треба використовувати атрибут "maxlength".

Поле <input type="number" /> використовує атрибути "max" та "min", щоб створити діапазон можливо-допустимих значень (у прикладі мінімально допустимий вік – 18).

4. Стилізування

CSS3 псевдо-класи дозволяють прикрасити форму незалежно від її стану. Це:

:valid
:invalid
:required
:optional
:in-range
:out-of-range
:read-only
:read-write

Відео курси за схожою тематикою:

ASP.NET Базовий

Дмитро Охріменко

HTML5 & CSS3 Стартовий

Віталій Мазяр

Angular Поглиблений

Дмитро Охріменко

У прикладі ми об'єднали селектори "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;
}

5. Підказки

Ви помічали спливаюче вікно з підказкою під час відправлення неправильно заповненої форми? Встановивши атрибут "title" для поля введення, можна додати підказки, що вказують на помилки при порушенні тих чи інших правил валідації.

Зверніть увагу, що різні браузери відображають підказки по-різному. У браузері Chrome значення назви атрибуту буде відображатися дрібним шрифтом, під основним повідомленням про помилку. У Firefox інша проблема: використовуючи атрибут “pattern” після того, як він береться в якості шаблону, Ви не отримаєте спливаючу підказку.