0Pricing
HTML Academy · Урок

Constraint Validation API

Читайте состояния validity и проверяйте ограничения с помощью JavaScript

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

Валидация без JavaScript

В HTML5 появилась встроенная проверка форм с помощью атрибутов: required, type="email", type="number", min, max, pattern, minlength, maxlength. Браузер автоматически проверяет данные при отправке и показывает сообщения об ошибках, при этом JS не требуется.

<input type="email" name="email" required>
<input type="number" name="age" min="18" max="120" required>
<input type="text" name="phone" pattern="\d{10}" required>

Селекторы CSS для проверки

:invalid выбирает поля, не прошедшие проверку, а :valid — поля, которые её прошли. Современный селектор :user-invalid срабатывает только после взаимодействия пользователя, поэтому на ещё не заполненной форме не появляются красные границы. Стилизуйте ошибки с помощью этих псевдоклассов.

input:user-invalid {
  border-color: red;
}
input:user-invalid + .error {
  display: block;
}

Объект ValidityState

Каждый элемент управления формы предоставляет свойство validity — объект ValidityState с логическими флагами: valid, valueMissing, typeMismatch, patternMismatch, rangeUnderflow, tooShort и другими. Проверяйте их, чтобы определить, какое сообщение об ошибке показать.

const input = form.querySelector("input[type=email]");
if (input.validity.typeMismatch) {
  showError(input, "Please enter a valid email address");
}

Метод checkValidity

input.checkValidity() возвращает true, если значение соответствует всем ограничениям, и false в противном случае. form.checkValidity() проверяет всю форму. Это полезно для программной проверки перед выполнением AJAX или перед разрешением пользователю перейти дальше в пошаговой форме.

Метод reportValidity

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

Настройка встроенных сообщений

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

novalidate отключает интерфейс браузера

Добавьте novalidate к форме, чтобы отключить стандартное поведение проверки браузера. Это полезно при создании полностью собственного отображения ошибок — форма всё равно отправится независимо от того, прошла бы она проверку или нет, поэтому перед отправкой выполните программную проверку.

Обработка событий invalid

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

Шаблон с регулярными выражениями

Атрибут pattern содержит регулярное выражение JavaScript, которому значение должно соответствовать целиком. Якоря ^ и $ добавлять не нужно — они подразумеваются автоматически. Используйте атрибут title, чтобы описать пользователю ожидаемый формат.

Проверка на стороне сервера по-прежнему обязательна

Проверка HTML предназначена для удобства пользователей; любой человек может обойти её, изменив DOM. Всегда повторно проверяйте данные на сервере. Ограничения HTML нужны для улучшения взаимодействия с пользователем — мгновенной обратной связи и уменьшения числа обращений к серверу, — а не для безопасности.

Сочетание нескольких ограничений

Ограничения применяются одновременно: <input type="number" min="18" max="120" required step="1"> должно содержать значение, которое является целым числом от 18 до 120. Браузер сообщает, какое именно ограничение нарушено, с помощью флагов ValidityState, поэтому Вы можете показать правильное сообщение.

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

Чем CSS-псевдокласс :user-invalid отличается от :invalid?

Итоги

Атрибуты встроенной проверки (required, type, pattern, min, max) и API ValidityState обеспечивают мощную проверку на стороне клиента без JS по умолчанию. CSS :user-invalid стилизует ошибки после взаимодействия с пользователем. checkValidity/reportValidity позволяют выполнять программные проверки. setCustomValidity заменяет стандартные сообщения. Всегда повторно проверяйте данные на сервере.

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

Урок «Constraint Validation API» бесплатный?

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

Чему я научусь в уроке «Constraint Validation API»?

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

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

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

Сколько времени занимает урок «Constraint Validation API»?

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

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

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

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

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