0Pricing
HTML Academy · Урок

reportValidity и setCustomValidity

Запускайте интерфейс проверки браузера и задавайте пользовательские сообщения об ошибках

«reportValidity и setCustomValidity» — бесплатный урок HTML Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Два интерфейса для встроенного взаимодействия

Интерфейс проверки ограничений предоставляет два метода, управляющих встроенным интерфейсом проверки браузера: reportValidity (показывает подсказку) и setCustomValidity (задаёт собственное сообщение об ошибке). Вместе они позволяют настраивать сообщения, сохраняя встроенный способ их отображения.

reportValidity и checkValidity

checkValidity() молча возвращает true или false и не влияет на интерфейс. reportValidity() выполняет ту же проверку, но дополнительно переводит фокус на первое недействительное поле и показывает всплывающую подсказку проверки браузера. Выбирайте reportValidity, когда нужен встроенный интерфейс без дополнительных усилий.

document.forms.signup.addEventListener("submit", (e) => {
  if (!e.target.reportValidity()) {
    e.preventDefault();
    // browser already focused first invalid field and showed tooltip
  }
});

Программная проверка

В пошаговых формах проверяйте поля каждого шага перед переходом дальше: if (step.reportValidity()) { next(); }. Браузер сам отображает ошибку и переводит фокус на поле, требующее внимания, поэтому Вам не нужно заново реализовывать управление фокусом.

setCustomValidity заменяет сообщения

Стандартные сообщения («Заполните это поле») могут не соответствовать Вашему стилю. input.setCustomValidity("Username is required") заменяет стандартное сообщение Вашим текстом. Поле считается недействительным, пока Вы не очистите сообщение.

Очистка собственных сообщений

input.setCustomValidity("") удаляет собственное сообщение и снова включает обычную проверку. Вызывайте этот метод при каждой повторной проверке, иначе устаревшие собственные сообщения сохранятся даже после того, как пользователь исправит проблему.

input.addEventListener("input", () => {
  if (input.value.length < 3) {
    input.setCustomValidity("Must be at least 3 characters");
  } else {
    input.setCustomValidity("");
  }
});

Асинхронная проверка

Для проверок на стороне сервера, например уникальности имени пользователя или действительности купона, вызывайте setCustomValidity после асинхронного ответа: const ok = await checkUsername(value); input.setCustomValidity(ok ? "" : "Already taken");. Браузер сразу учитывает новое состояние проверки.

Сочетание с собственным интерфейсом ошибок

Чтобы использовать собственное отображение ошибок и при этом сохранить отслеживание состояния проверки, обрабатывайте событие invalid и вызывайте e.preventDefault(), чтобы скрыть встроенную подсказку: input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input, input.validationMessage); }).

Несколько собственных ограничений

setCustomValidity поддерживает только одно собственное сообщение за раз. Чтобы применить несколько правил, проверьте каждое из них и вызовите setCustomValidity с наиболее уместным сообщением в порядке приоритета. Отображается сообщение для первого нарушенного правила.

Не дублируйте встроенную проверку

Если задать собственное сообщение для пустого обязательного поля, Ваше сообщение может конфликтовать со стандартным. Выберите один подход для каждого поля: либо отключите встроенное ограничение (используйте type="text" вместо type="email" и выполняйте проверку через setCustomValidity), либо полностью доверьтесь встроенной проверке.

Проверка формы с учётом нескольких полей

Для проверки связанных полей, например совпадения паролей, примените setCustomValidity к связанному полю: confirmInput.setCustomValidity(confirmInput.value === passInput.value ? "" : "Passwords do not match"). Форма остаётся недействительной, пока оба значения не совпадут.

Интернационализация

Встроенные сообщения браузер переводит на основе языка пользователя. Собственные сообщения, заданные через setCustomValidity, Вы должны переводить самостоятельно: прочитайте navigator.language или используйте собственное состояние локализации и передайте соответствующий перевод.

Тестирование

Откройте DevTools и проверьте все варианты ошибки: отправку пустой формы, частично заполненные поля, несоответствие формату и сбой асинхронной проверки. Убедитесь, что показывается правильное сообщение, после исправления проблемы оно исчезает, а отправка действительной формы выполняется. Отдельно протестируйте особые случаи, например вставку значения в неправильном формате и автозаполнение браузера.

Проверка знаний

После вызова input.setCustomValidity("Уже занято") как сообщить браузеру, что поле снова действительно?

Итоги

reportValidity вызывает встроенный интерфейс проверки браузера — переводит фокус и показывает подсказку, — поэтому отлично подходит для программных проверок. setCustomValidity заменяет стандартные сообщения Вашим текстом; когда значение снова становится действительным, очистите сообщение пустой строкой. Обрабатывайте событие invalid с помощью preventDefault, чтобы полностью управлять отображением ошибок. Используйте эти возможности для проверки связанных полей, асинхронных проверок и локализованных собственных сообщений.

Часто задаваемые вопросы

Урок «reportValidity и setCustomValidity» бесплатный?

Да — полный текст урока «reportValidity и setCustomValidity» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «reportValidity и setCustomValidity»?

Запускайте интерфейс проверки браузера и задавайте пользовательские сообщения об ошибках Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «reportValidity и setCustomValidity»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. API FormData
  2. Constraint Validation API
  3. reportValidity и setCustomValidity
  4. События сброса формы и управление состоянием
← Назад к HTML Academy