Демонстрация: регистрация на курс
Результат отправки
Форма ещё не отправлена.
Как это работает
Атрибуты вместо ручных проверок
html
<input type="email" required>
<input type="password" minlength="8" pattern="(?=.*\d)(?=.*[A-Za-z]).{8,}">
<input type="number" min="16" max="99">
<input type="url">Свои сообщения об ошибках
js
const field = document.getElementById('fEmail');
field.addEventListener('blur', () => {
if (field.validity.valueMissing) {
field.setCustomValidity('Укажите электронную почту');
} else if (field.validity.typeMismatch) {
field.setCustomValidity('Похоже, в адресе опечатка');
} else {
field.setCustomValidity(''); // сбрасываем — иначе поле останется невалидным
}
});setCustomValidity('') нужно вызывать обязательно. Если этого не делать,
поле навсегда останется невалидным.
Сбор данных
js
form.addEventListener('submit', (event) => {
event.preventDefault();
if (!form.checkValidity()) { form.reportValidity(); return; }
const data = Object.fromEntries(new FormData(form));
console.log(data);
});
Атрибут
novalidate в нашем примере отключает всплывающие системные подсказки —
чтобы показать собственную логику. В реальном проекте его можно и не ставить.
Задание
- Добавьте поле «Подтверждение пароля» и проверьте совпадение вручную через
setCustomValidity. - Сделайте индикатор надёжности пароля (слабый / средний / сильный) с изменением цвета.
- Запретите ввод цифр в поле имени через событие
input. - Свяжите каждое сообщение об ошибке с полем через
aria-describedbyдля скринридеров.