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

22

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

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

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

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

First Name

Тег 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;
}
}
}
}
}

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

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

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

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

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

Зробіть так, щоб користувач зрозумів, а чи правильно він ввів дані. У браузері це можна зробити через 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;
}
}
}
}
}

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

Селектор :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;
}
}
}
// ~
// ~
//

.вимога {
padding: 0 30px 0 50px;
color: #999;
max-height: 0;
transition: 0.28 s;
overflow: hidden;
color: red;
font-style: italic;
}
}
}

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

Можна створити потужний валідатор

Я маю на увазі не просто атрибути required або type=»email» і т. д. На стороні клієнта можна перевіряти такі показники, як довжина (наприклад, мінімальна довжина пароля або максимальна кількість знаків у полі опису). Можна навіть використовувати всю міць регулярних виразів. Наприклад, вам потрібно, щоб пароль задовольняв умовам:

Мінімум 6 символів

Мінімум один великий символ

Мінімум один маленький символ

Мінімум одне число

Зробити це можна ось так:

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

Демо

Я не став прибирати :placeholder-shown, хоч він і погано працює в IE і Firefox. Це ж просто демо! Не соромтеся, покопатися в коді, знайдіть що-небудь для себе.