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

18

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

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

На щастя, HTML5 надає кілька можливостей, які здатні вирішити велику частину питань, пов’язаних з валідацією форм. Форми в HTML5 тепер мають вбудовану підтримку для валідації через використання спеціальних атрибутів і нових типів елементів input. А це також дає вам більше контролю над оформленням форм через CSS.

Подивіться на онлайн-приклад валідації форми і прочитайте невелику шпаргалку з основ валідації форм в HTML5.

Спеціальні типи елемента Вводу

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

color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week

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

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

Обов’язкові поля

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

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

Коли ви вказуєте атрибут required для полів типу email або url, браузер очікує наявності певного шаблону, за яким він зможе перевірити інформацію, але подібна перевірка дуже поблажлива і пропускає e-mail адреси на кшталт «[email protected]» (читайте далі, щоб дізнатися, як з цим боротися).

Ліміти

Ми можемо встановити базові обмеження, такі як максимальна довжина або мінімальне і максимальне значення для числових полів. Щоб обмежити довжину елементів input або textarea, використовуйте атрибут «maxlength». Це робиться для того, щоб взагалі можна було ввести рядок довший, ніж значення атрибута «maxlength». Якщо ви спробуєте вставити рядок, яка перевищує ліміт, то форма просто відріже її.

Полі input type=»number» використовує атрибути «мах» та «min» для створення діапазону можливих значень. У нашому демо-прикладі ми поставили мінімальний можливий вік дорівнює 18 (дуже погано, що в Інтернеті ви можете бути будь-якого віку).

Оформлення

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

:valid

:invalid

:required

:optional

:in-range

:out-of-range

:read-only

:read-write

Це означає, що обов’язкові поля у вас можуть виглядати одним чином, необов’язкові — іншим і т. д. В нашому демо-прикладі ми скомбінували селектори «valid» і «invalid» із псевдо-класом «focus», щоб розфарбувати поля форми в червоний і зелений кольори, коли користувач вибирає їх і починає в них що-небудь вводити.

input:focus:invalid,
textarea:focus:invalid{
border:2px solid #F5192F;
}
input:focus:valid,
textarea:focus:valid{
border:2px solid #18E109;
background-color:#fff;
}

Спливаючі підказки

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

Зверніть увагу на те, що різні браузери по-своєму відображають спливаючі підказки. У браузері Chrome значення атрибута title з’явиться під основним текстом повідомлення про помилку, і буде мати менший розмір шрифту, ніж текст про помилку. Браузер Firefox взагалі не буде відображати ваш текст спливаючої підказки до тих пір, поки ви не будете використовувати атрибут «pattern», який буде використаний для інформації про нього.

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

Шаблони

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

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

Ми сподіваємося, що ця невелика шпаргалка допомогла вам познайомитися з можливостями валідації форм в HTML5. Спасибі за читання!