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 спрацьовує тільки для тих полів, які є невалідними під час спроби відправлення форми. Якщо всі поля валідні, подія не буде викликана.

правити

Порада

Важливо використовувати параметр true для третього аргументу у addEventListener, якщо ви хочете обробляти подію під час її "спливання" (capturing phase). Це дозволить вам краще контролювати валідацію на рівні форми або контейнера.

автор: Bond правити

Порада

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

автор: Bond правити

Порада

Для створення більш гнучкої валідації, можна використовувати подію invalid в комбінації з подією submit, щоб забезпечити правильний потік перевірки перед відправленням форми.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('invalid', function(event) {
  // Ваш код тут
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	66	57	11.1	53	16

Підтримка: мобільні переглядачі

Переглядач
	66	66	57	11.3

Підтримка: серверні переглядачі

Переглядач
	15.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<input type="email" id="email" value="[email protected]" placeholder="Введи щось">

const inputField = document.getElementById('email');

inputField.addEventListener('invalid', function(event) {
  event.preventDefault();
  if (!inputField.validity.valid) {
    inputField.setCustomValidity('Будь ласка, введіть коректний email.');
  }
});

<form>
    <label>Ім'я: <input type="text" name="name"></label>
    <button type="submit">Надіслати</button>
</form>

const form = document.querySelector('form');

form.addEventListener('invalid', function(event) {
  event.preventDefault();
  event.target.style.border = '2px solid red';
}, true);