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 спрацьовує тільки для тих полів, які є невалідними під час спроби відправлення форми. Якщо всі поля валідні, подія не буде викликана.
- Порада
-
Важливо використовувати параметр
автор: Bondtrueдля третього аргументу уaddEventListener, якщо ви хочете обробляти подію під час її "спливання" (capturing phase). Це дозволить вам краще контролювати валідацію на рівні форми або контейнера. - Порада
-
Щоб уникнути множинного відображення повідомлень про помилки на кожне поле, можна встановити спеціальний прапорець у вашому коді, який запобігатиме повторному виклику обробників події
автор: Bondinvalid. - Порада
-
Для створення більш гнучкої валідації, можна використовувати подію
автор: Bondinvalidв комбінації з подієюsubmit, щоб забезпечити правильний потік перевірки перед відправленням форми.
Синтаксис
element.addEventListener('invalid', function(event) {
// Ваш код тут
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 10 | 4 | 5 | 10 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4 | 18 | 64 | 5 |
Приклади
+ запропонувати свій приклад у пісочниці
Цей приклад демонструє, як можна використовувати метод setCustomValidity(), щоб змінити стандартне повідомлення про помилку для поля електронної пошти. Якщо користувач вводить некоректний email, з’явиться кастомне повідомлення з інструкцією.
HTML
<input type="email" id="email" value="[email protected]" placeholder="Введи щось">JS
const inputField = document.getElementById('email');
inputField.addEventListener('invalid', function(event) {
event.preventDefault();
if (!inputField.validity.valid) {
inputField.setCustomValidity('Будь ласка, введіть коректний email.');
}
});У цьому прикладі подія invalid використовується для зміни стилю невалідного поля. Коли користувач намагається відправити форму з помилкою, поле, яке не пройшло валідацію, підсвічується червоною рамкою. Це дозволяє користувачу візуально зрозуміти, де саме допущена помилка.
HTML
<form>
<label>Ім'я: <input type="text" name="name"></label>
<button type="submit">Надіслати</button>
</form>JS
const form = document.querySelector('form');
form.addEventListener('invalid', function(event) {
event.preventDefault();
event.target.style.border = '2px solid red';
}, true);У цьому прикладі при спробі відправки форми, подія invalid кастомізує повідомлення про помилки для кожного поля, яке не пройшло валідацію. Якщо користувач вводить некоректні дані, поле підсвічується червоною рамкою, а під ним з'являється індивідуальне повідомлення з поясненням помилки. Також при подальшому введенні даних помилки автоматично зникають, коли поле стає валідним.
HTML
<header>
<h2 class="title">invalid</h2>
<p class="description">Спрацьовує, коли поле форми не проходить валідацію.</p>
</header>
<main>
<form id="userForm">
<div class="form-group">
<label for="username">Ім'я користувача (обов'язково, мінімум 3 символи):</label>
<input type="text" id="username" name="username" required minlength="3" placeholder="Введіть ім'я користувача">
<span class="error-message" id="usernameError"></span>
</div>
<div class="form-group">
<label for="email">Email (обов'язково, валідний формат):</label>
<input type="email" id="email" name="email" required placeholder="Введіть електронну адресу">
<span class="error-message" id="emailError"></span>
</div>
<div class="form-group">
<label for="age">Вік (обов'язково, більше 18):</label>
<input type="number" id="age" name="age" required min="18" placeholder="Введіть ваш вік">
<span class="error-message" id="ageError"></span>
</div>
<button type="submit">Відправити</button>
</form>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
box-shadow: 0px 0px 3px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.form-group {
margin-bottom: 15px;
}
input {
padding: 8px;
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
margin-top: 5px;
}
input.invalid {
border-color: red;
}
.error-message {
color: red;
font-size: 12px;
margin-top: 5px;
display: block;
}JS
const form = document.getElementById('userForm');
form.addEventListener('invalid', function (event) {
event.preventDefault(); // Запобігаємо стандартному сповіщенню браузера
const target = event.target;
const errorMessage = target.nextElementSibling; // Наступний елемент після поля - повідомлення про помилку
if (target.id === 'username') {
if (target.validity.valueMissing) {
errorMessage.textContent = 'Це поле є обов\'язковим.';
} else if (target.validity.tooShort) {
errorMessage.textContent = 'Ім\'я користувача має бути мінімум 3 символи.';
}
target.classList.add('invalid');
} else if (target.id === 'email') {
if (target.validity.valueMissing) {
errorMessage.textContent = 'Будь ласка, введіть email.';
} else if (target.validity.typeMismatch) {
errorMessage.textContent = 'Введіть коректну електронну адресу.';
}
target.classList.add('invalid');
} else if (target.id === 'age') {
if (target.validity.valueMissing) {
errorMessage.textContent = 'Будь ласка, введіть свій вік.';
} else if (target.validity.rangeUnderflow) {
errorMessage.textContent = 'Вік має бути не менше 18 років.';
}
target.classList.add('invalid');
}
}, true);
// Очищення помилок при введенні даних
form.addEventListener('input', function (event) {
const target = event.target;
const errorMessage = target.nextElementSibling;
if (target.classList.contains('invalid')) {
target.classList.remove('invalid');
errorMessage.textContent = '';
}
});
//# sourceURL=pen.jsКоментарі
Коментарів ще немає — будьте першим!