Урок: проверить состояния required без отправки данных

Назначение

Проверка обязательного поля включает несколько разных состояний: пустое значение, неверный формат и допустимый ввод. Урок учит смотреть конкретные признаки validity, не угадывая причину по одному цвету рамки.

Как это работает

В локальном файле создайте input id test-email с type="email" и required. После него подключите пример или выполните код в консоли своей страницы. Данные никуда не отправляются: читается только текущее состояние поля.

Пример

const email = document.querySelector("#test-email");
for (const value of ["", "wrong", "reader@example.com"]) {
  email.value = value;
  console.log({value, missing:email.validity.valueMissing, type:email.validity.typeMismatch, valid:email.validity.valid});
}

Что должно получиться

Пустое значение выявляет valueMissing, строка wrong — несоответствие email-формату, учебный адрес проходит встроенную проверку синтаксиса. Наличие реального почтового ящика при этом не проверяется.

Граница применения и частая ошибка

Programmatic value не запускает событие input автоматически. Не делайте вывод о работе собственных обработчиков только по этому циклу. Валидность браузера также не подтверждает разрешение пользователя на операцию и не заменяет серверные правила.

Самостоятельная проверка

Повторите те же значения ручным вводом. Уберите required и сравните пустое состояние. Запишите результаты в таблицу и отдельно проверьте своё сообщение об ошибке, если добавляли setCustomValidity.

Связанные материалы

• Диагностика в консоли
• Прототип формы
• Повторные проверки