Як підвищити UX валідаторів форм в HTML і CSS

Від автора: лише на HTML-атрибути можна зробити незліченну безліч різних валідаторів форм. Селектори CSS допоможуть вам спростити роботу і зробити її більш зрозумілою для користувачів. Однак, щоб досягти дійсного хорошого результату, доведеться трохи попотіти з CSS!

Лейбли як плейсхолдеров

По-перше, завжди використовуйте тег . Вже на даному етапі у багатьох формах страждає користувальницький досвід (UX). Плейсхолдеры являють собою підказки правильного вводу даних. Наприклад, плейсхолдер «Талса» (місто в Оклахомі) в поле «Місто».

Якщо форма маленька і стандартна (типу форми входу або реєстрації), можна було б використовувати плейсхолдеры, але краще все-таки використовувати справжні лейбли. Візьмемо форму…

Тег div можна використовувати для позиціонування і помістити лейбл прямо над формою.

form {
max-width: 450px;
// контекст позиціонування
> div {
position: relative;
// Буде виглядати, як плейсхолдер
> label {
opacity: 0.3;
position: absolute;
top: 22px;
left: 20px;
}
}
}

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

form {
/* … */
> div {
> input[type=”text”],
> input[type=”email”],
> input[type=”password”] {
&:focus {
& + label {
opacity: 0;
}
}
}
}
}

Як додати обов’язкові поля

Можливо, найпростіший спосіб створити валідатор форми це використовувати атрибут required для обов’язкових полів. Краще дозволити браузеру ловити помилки, швидше за нього це ніхто не зробить!

Позитивна індикація введення вірного значення

Зробіть так, щоб користувач зрозумів, а чи правильно він ввів дані. У браузері це можна зробити через CSS селектор :valid:

form {
> input[type=”text”],
> input[type=”email”],
> input[type=”password”] {
// show success!
&:valid {
background: url(images/check.svg);
background-size: 20px;
background-repeat: no-repeat;
background-position: 20px 20px;
// continue to hide the label
& + label {
opacity: 0;
}
}
}
}
}

Селектор :valid у нашому прикладі показує, що дотримані обов’язкові умови щодо заповнення поля. Проте його також можна використовувати для валідації типу даних, що вводяться.

Показуйте підказки за типом даних, що вводяться

Можна зробити так, щоб полі приймало тільки значення певного типу, наприклад, email або number. За посиланням можна подивитися всі типи.

Дане поле не просто обов’язково для заповнення, у нього ще можна ввести дані у форматі електронної пошти. Для гарного UX нам необхідно:

Ах да… не показуйте підказки, якщо поле пусте. Як наслідок, можна привласнювати полю невірне стан. Це лише дратує і негативно позначається на відчуттях. Тому нам необхідно перевіряти поле на порожнечу.

Невеликий фокус! Тест поля на порожнечу

Ми хочемо задіяти в валидаторе селектори :valid і :invalid, але нам не можна передчасно присвоювати пустому полю селектор :invalid.

Є який-небудь селектор для перевірки поля на порожнечу? Не зовсім! Ви могли відразу згадати про :empty, але він нам не підходить. Цей селектор використовується для перевірки контейнерів типу

. Инпуты ж не є контентосодержащими елементами. Фокус в тому, що для порожнього поля необхідно присвоювати плейсхолдер:

input:not(:placeholder-shown) {
}

Ми майже не використовуємо плейсхолдер в нашому демо, що ми просто в значенні поставили один пробіл:

Тут нам дуже допомагає псевдоклас :placeholder-shown! Це секретний селектор для перевірки поля на порожнечу. Даний псевдоклас не підтримується IE і Firefox, що накладає свої складнощі на його застосування. У таких випадках зазвичай рятує @supports, але…

/* Не спрацює */
@supports (input:placeholder-shown) {
input:not(:placeholder-shown) {
}
}

Правило @supports не можна застосовувати до селекторам, тільки властивості/значення (наприклад, @supports (display: flex)). В JS написати тест на наявність плейсхолдера не так вже й складно:

var i = document.createElement(‘input’);
if (‘placeholder’ in i) {
}

А ось простого тесту для :placeholder-shown в найближче майбутнє не передбачається. Так що, може бути, краще просто почекати широкої підтримки в браузерах і потім використовувати цей селектор у великих проектах. Якби підтримка була нормальна, то логіка була б така…

form {
> div {
> input[type=”text”],
> input[type=”email”],
> input[type=”password”] {
// Коли поле…
// 1. НЕ порожньо
// 2. НЕ в фокусі
// 3. НЕвалидно
&:invalid:not(:focus):not(:placeholder-shown) {
// Показуємо нагадування з підсвічуванням
background: pink;
& + label {
opacity: 0;
}
}
// Коли невалидное поле отримало фокус (і не порожньо)
&:invalid:focus:not(:placeholder-shown) {
// Показуємо докладну інструкцію щодо заповнення знизу.
& ~ .вимога {
max-height: 200px;
padding: 0 30px 20px 50px;
}
}
}
// ~
// ~
//