Constraint Validation API: встроенная проверка и собственное сообщение

Назначение

Браузерная проверка формы помогает заметить ошибку до отправки. Constraint Validation API позволяет прочитать состояние поля и добавить правило, которое не выражено одними атрибутами HTML.

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

В собственном учебном файле создайте input с id nickname и required. Подключите пример после разметки. SetCustomValidity с непустой строкой делает поле невалидным, поэтому прежнее сообщение нужно очищать при повторной проверке.

Пример

const field = document.querySelector("#nickname");
function validateNickname() {
  field.setCustomValidity("");
  if (field.value && field.value.trim().length < 3) {
    field.setCustomValidity("После удаления пробелов по краям должно остаться не менее трёх символов.");
  }
}
field.addEventListener("input", validateNickname);
validateNickname();

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

Для короткого заполненного значения возникает собственная ошибка, после исправления она снимается. Пустое значение остаётся под контролем required. ReportValidity может показать сообщение по явному действию пользователя.

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

Этот пример считает кодовые единицы строки, а не пользовательские символы всех языков. Не показывайте навязчивое сообщение после каждого нажатия клавиши. Сервер обязан заново проверять данные: клиентские ограничения можно обойти.

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

Проверьте пустое поле, пробелы, два символа и корректное значение. Посмотрите validity.customError и validity.valueMissing. Временно уберите очистку сообщения в копии и объясните, почему исправленное поле остаётся невалидным.

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

• Ошибки формы
• События
• Постепенное улучшение