Техніки валідації форм

1. використовуємо CSS
2. використовуємо JavaScript
3. Додаємо кілька повідомлень про помилки в один зринаючі підказки
4. Показуємо всі помилки для всіх полів.
5. Використовуємо нестандартні перевірки валідності
6. Валідація в реальному часі

Це переклад статті Ірі Адерінокун - « Form validation techniques ».

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

використовуємо CSS

У CSS існує чотири спеціальні псевдокласу, які можна застосувати до полів форми:: valid (валідність поле),: invalid (невалидность),: required (обов'язкове) і: optional (необов'язкове). Їх можна використовувати, щоб додавати деякі - хоча й дуже обмежені - підказки користувачам, які заповнюють форму.

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

Стилізація псевдокласів: valid і: invalid

Однак з цим способом пов'язана одна проблема: стилі застосовуються до того, як користувач почне роботу з формою. Поля, обов'язкові для заповнення, відразу підсвітяться нам як: invalid, а необов'язкові - як: valid. Це означає, що користувач, навіть не приступивши до заповнення форми, може відразу ж отримати негативну зворотний зв'язок. Не дуже-то добре.

Стилізація станів: required і: optional сама по собі не особливо корисна, оскільки ця інформація зазвичай вказується в підписах до полів форми. Однак ми можемо об'єднати ці стани з псевдоклас: valid /: invalid і стилізувати їх комбінації. Наприклад, ми хочемо показувати лише позитивний результат, коли валідність обов'язкове до заповнення поле.

Стилізація по: valid і: required

використовуємо JavaScript

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

Встановлюючи атрибути min, max і step, ми можемо бути впевнені в правильності значення тільки тоді, коли користувач використовує спеціальні контроли числового поля. Але що заважає користувачеві ввести вручну некоректні дані? Ось що станеться, якщо він вставить 1, 12 і 123 в три поля і відправить форму:

Стандартний зринаючі підказки валідації

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

Додаємо кілька повідомлень про помилки в один зринаючі підказки

Валідіруя поля, браузер перевіряє їх за певним списком потенційних помилок. У кожному полі міститься спеціальний об'єкт validity, що включає в себе список булевих значень, що характеризують ту чи іншу перевірку на валідність. Наприклад, ось такий validity-об'єкт буде у поля, коли користувач введе в нього 1:

Примітка перекладача: Слово «mismatch» перекладається як «невідповідність». Тому в значеннях patternMismatch, stepMismatch і typeMismatch зворотна логіка: true - значення не задовольняє атрибуту, false - задовольняє.

За замовчуванням браузер відобразить лише одну помилку. Що ми можемо зробити, так це перевірити всі ці значення самостійно і, якщо знайдуться помилки, зберегти їх. Як тільки ми збережемо всі помилки для одного поля, ми можемо відобразити весь їх список у вигляді спеціального повідомлення про помилку за допомогою функції setCustomValidity ().

Тепер при спробі відправити форму ми побачимо ось це:

Відображаємо кілька помилок в одному зринаючі підказки

Стало краще, оскільки тепер будуть показуватися всі повідомлення про помилки, пов'язані з конкретним полем. Однак інша проблема усе ще не вирішена: помилки і раніше показуються лише для першого поля.

Це обмеження валідації, яке встановлюється браузером. Щоб його подолати, нам потрібно піти іншим шляхом.

Показуємо всі помилки для всіх полів.

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

Цього можна домогтися якоїсь парою додаткових рядків в нашому коді:

Ось що відбувається при кліці на submit тепер:

Відображаємо всі помилки для всіх полів в DOM

Використовуємо нестандартні перевірки валідності

Іноді вбудованої в браузер валідації може не вистачити. Нам може знадобитися, щоб дані, що вводяться задовольняли деяким додатковим правилам. Наприклад, щоб в текстовому полі потрібно вказати особливі символи.

Так як ми вже перевіряємо всі можливі помилки вручну в нашій функції CustomValidation.prototype.checkValidity, ми можемо просто-напросто додати туди ще кілька перевірок.

Валідація в реальному часі

Хоча поточний спосіб виглядає набагато краще, він теж не без вад. Найгірший з недоліків полягає в тому, що користувач не зможе побачити ніяких повідомлень, поки не натисне на кнопку відправки форми. Було б набагато краще, якби валідація поля відбувалася відразу ж при його заповненні. Можна виділити три правила для того, щоб з формою було зручно працювати:

1. Вимоги для кожного поля чітко видно до того, як користувач почав друкувати.
2. Як тільки користувач починає вводити дані, дотримуючись вимог, він відразу бачить індикатор успішного заповнення поля або підказки, якщо є помилки.
3. Потрібно відображати повідомлення про помилки таким чином, щоб користувач не міг відправити некоректно заповнену форму.

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

Приклад валідації в реальному часі

Якщо ви хочете спробувати свої сили (і навіть зробити краще), ви можете скористатися ось цим шаблоном .

Це переклад статті Ірі Адерінокун - « Form validation techniques ».