JS властивість Event.invalid
Загальний опис
Подія invalid спрацьовує для елементів форми, коли вони не відповідають умовам валідації HTML5 під час спроби відправити форму. Це дозволяє розробникам реагувати на некоректні дані безпосередньо в момент, коли браузер виявляє помилку валідації. Подія не спрацьовує в режимі реального часу, як, наприклад, подія input, а викликається лише тоді, коли користувач намагається відправити форму і дані не відповідають умовам, встановленим через атрибути форми, такі як required, pattern, min, max, type, тощо.
Однією з ключових особливостей події invalid є можливість кастомізації поведінки, коли дані некоректні. Наприклад, ви можете додати індивідуальні повідомлення про помилки або застосувати спеціальні стилі для підсвічування полів з помилками.
const form = document.querySelector('form');
form.addEventListener('invalid', function(event) {
event.preventDefault(); // Зупиняє стандартну поведінку браузера
alert('Заповніть це поле коректно!');
}, true);
У цьому прикладі використовується метод preventDefault(), щоб уникнути стандартного сповіщення браузера про помилку і замінити його власним повідомленням через alert. Важливо також зазначити, що подія invalid не спрацює для прихованих полів або для полів, які не мають атрибутів валідації.
Подія invalid підтримується більшістю сучасних браузерів і працює з будь-якими полями, які мають вбудовані або призначені для користувача правила валідації. Наприклад, ви можете перевіряти, чи текстове поле не порожнє (required), чи число знаходиться в заданому діапазоні (min, max), або чи рядок відповідає певному регулярному виразу (pattern).
Також важливо врахувати, що подія invalid спрацьовує тільки для тих полів, які є невалідними під час спроби відправлення форми. Якщо всі поля валідні, подія не буде викликана.
| Порада: | Важливо використовувати параметр |
| Порада: | Щоб уникнути множинного відображення повідомлень про помилки на кожне поле, можна встановити спеціальний прапорець у вашому коді, який запобігатиме повторному виклику обробників події |
| Порада: | Для створення більш гнучкої валідації, можна використовувати подію |
Синтаксис
element.addEventListener('invalid', function(event) {
// Ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі при спробі відправки форми, подія invalid кастомізує повідомлення про помилки для кожного поля, яке не пройшло валідацію. Якщо користувач вводить некоректні дані, поле підсвічується червоною рамкою, а під ним з'являється індивідуальне повідомлення з поясненням помилки. Також при подальшому введенні даних помилки автоматично зникають, коли поле стає валідним.
Цей приклад демонструє, як можна використовувати метод setCustomValidity(), щоб змінити стандартне повідомлення про помилку для поля електронної пошти. Якщо користувач вводить некоректний email, з’явиться кастомне повідомлення з інструкцією.
const inputField = document.getElementById('email');
inputField.addEventListener('invalid', function(event) {
event.preventDefault();
if (!inputField.validity.valid) {
inputField.setCustomValidity('Будь ласка, введіть коректний email.');
}
});У цьому прикладі подія invalid використовується для зміни стилю невалідного поля. Коли користувач намагається відправити форму з помилкою, поле, яке не пройшло валідацію, підсвічується червоною рамкою. Це дозволяє користувачу візуально зрозуміти, де саме допущена помилка.
const form = document.querySelector('form');
form.addEventListener('invalid', function(event) {
event.preventDefault();
event.target.style.border = '2px solid red';
}, true);