Інтерактивна валідація HTML форм

38

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

Webkit браузерах вже була часткова підтримка умов. Раніше для опису умов можна було використовувати атрибути полів форми, після чого перевіряти окремі поля або всю форму на валідність через checkValidity() API в JS. ValidityState API також дозволяв визначати конкретне поле, де було порушено умову валідації.

Однак webkit браузери не підтримували інтерактивну валідацію HTML форм, яка повинна спрацьовувати в момент відправки форми (якщо тегу
не заданий атрибут novalidate) або при використанні reportValidity() API. Ми раді повідомити, що інтерактивна валідація форм тепер працює в webkit браузерах і доступна в Safari Technology Preview 19. Тепер під час валідації форми webkit перевіряє правильність заповнення всіх полів. Якщо є хоч одне порушення умови валідації, webkit перегорне екран до першого порушення і покаже спливаюче хмарка з повідомленням, в якому буде пояснена проблема.

Умови валідації

Тип поля

У деяких типів полів є вбудовані умови валідації. У полів типу email, number та URL є автоматична перевірка значення на відповідність електронній пошті, числа і адресою. Наприклад:

Атрибути валідації

Для запису умов в полях форми можна використовувати наступні атрибути:

required: показує на те, що дане значення обов’язково для введення.

pattern=»[a-z]»: вказує, що користувач повинен ввести значення, яке проходить перевірку регулярним виразом з JS.

minlength=x: вказує, що користувач повинен ввести значення як мінімум з Х символів.

maxlength=y: вказує, що користувач може ввести максимум символів.

min=x: вказує, що користувач повинен ввести значення більше або рівне Х.

max=y: вказує, що користувач повинен ввести значення, менше або рівне У.

step=x: вказує, що користувач повинен ввести значення, яке дорівнює min + ціле число кратне Х.

Умовна валідація

Провести умовну валідацію можна кількома способами:

Можна викликати checkValidity() на всю форму або конкретне поле. Якщо умову порушено, буде повернуто » false в протилежному випадку true. На що не пройшов валідацію поле (ях) спрацює подія invalid. Дізнатися поле, яке не пройшло валідацію, можна з допомогою об’єкта ValidityState, який можна отримати через атрибут validity поля форми.

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

Інтерактивна валідація форми спрацьовує при відправці її на сервер, якщо у тега
не заданий атрибут novalidate.

Користувальницькі умови

Для конкретного поля можна реалізувати складніші умови валідації або записати своє повідомлення про помилку за допомогою валідації через JS і подальшому використанні setCustomValidity() API.

JS можна запустити за допомогою події (наприклад, onchange, oninput і т. д.) на поле форми. Виконуваний код JS може перевіряти дані з полів форми і оновлювати повідомлення про помилку через setCustomValidity():

Feeling:
function validateFeeling(input) {
if (input.value == «good» || input.value == «fine» || input.value == «tired») {
input.setCustomValidity(‘»‘ + input.value + ‘» is not a feeling’);
} else {
// Дані пройшли перевірку, скидаємо повідомлення про помилку.
input.setCustomValidity(«);
}
}

Хмарка з повідомленням

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

Интерактивная валидация HTML форм

Для вбудованих умов валідації є набір локалізованих повідомлень. Змінити повідомлення можна за допомогою setCustomValidity() API. Зверніть увагу на те, що webkit підтримує JavaScript internationalization API, за допомогою якого можна локалізувати свої повідомлення про помилки.

Висновок

Тепер webkit підтримується інтерактивна валідація HTML форм, а також вона доступна за замовчуванням в Safari Technology Preview 19. Подивіться наше демо і експериментуйте з валідацією. Повідомлення про баги вітаються.