0Pricing
HTML Academy · Урок

Основы Constraint Validation API

Читайте состояние validity и пользовательские сообщения с помощью Constraint Validation API

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

Что такое API проверки ограничений

API проверки ограничений — это интерфейс JavaScript для чтения и изменения состояния проверки form:

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

Свойство validity

Каждый элемент управления form имеет объект validity с определёнными логическими флагами:

const input = document.getElementById('email');
const v = input.validity;

console.log(v.valid);         // true if all constraints pass
console.log(v.valueMissing);  // true if required but empty
console.log(v.typeMismatch);  // true if type doesn't match (e.g. bad email)
console.log(v.patternMismatch); // true if pattern fails
console.log(v.tooShort);      // true if shorter than minlength
console.log(v.tooLong);       // true if longer than maxlength
console.log(v.rangeUnderflow); // true if less than min
console.log(v.rangeOverflow);  // true if more than max

Метод checkValidity

checkValidity() возвращает true/false и вызывает событие invalid:

const form = document.getElementById('my-form');

// Check entire form:
if (!form.checkValidity()) {
  console.log('Form has errors');
}

// Check individual field:
const email = document.getElementById('email');
if (!email.checkValidity()) {
  console.log('Email is invalid');
}
// The 'invalid' event fires on invalid fields

Метод reportValidity

reportValidity() показывает встроенный интерфейс браузерной проверки:

const input = document.getElementById('username');

// Shows native browser error tooltip if invalid:
const valid = input.reportValidity();
console.log(valid);  // true or false

// On a form: validates all fields and shows first error:
document.getElementById('form').reportValidity();

Свойство validationMessage

validationMessage возвращает строку с сообщением об ошибке браузера:

const email = document.querySelector('input[type=email]');
email.value = 'not-an-email';

console.log(email.validationMessage);
// e.g. "Please include an '@' in the email address..."

console.log(email.validity.typeMismatch); // true

setCustomValidity

setCustomValidity(message) устанавливает пользовательскую ошибку проверки:

const username = document.getElementById('username');

// Check availability on blur:
username.addEventListener('blur', async () => {
  const res = await fetch(`/check-username?name=${username.value}`);
  const { taken } = await res.json();

  if (taken) {
    username.setCustomValidity('This username is already taken.');
  } else {
    username.setCustomValidity('');  // empty string = clear the error
  }
});

Сброс пользовательского состояния проверки

Необходимо сбрасывать пользовательское состояние проверки, когда пользователь устраняет проблему:

const input = document.getElementById('username');

input.addEventListener('input', () => {
  // Clear custom error when user starts typing again:
  input.setCustomValidity('');
});

input.addEventListener('blur', async () => {
  // Re-validate on blur:
  const taken = await checkUsername(input.value);
  input.setCustomValidity(taken ? 'Username taken' : '');
});

Событие invalid

Событие invalid вызывается для элементов управления form, не прошедших проверку:

document.querySelectorAll('input').forEach(input => {
  input.addEventListener('invalid', (e) => {
    e.preventDefault();  // prevent default browser tooltip
    // Show your custom error UI instead:
    showError(input, input.validationMessage);
  });
});

Свойство willValidate

willValidate имеет значение true, если элемент участвует в проверке ограничений:

document.querySelectorAll(':input').forEach(el => {
  if (el.willValidate) {
    console.log(el.name, 'will be validated');
  }
});
// Disabled, hidden, or output elements return willValidate = false

Использование validity в пользовательской проверке

Полный пример пользовательской проверки:

<form id="signup" novalidate>
  <input type="email" id="email" name="email" required>
  <span id="email-err" role="alert"></span>
  <button type="submit">Sign Up</button>
</form>

<script>
const form = document.getElementById('signup');
const email = document.getElementById('email');
const err = document.getElementById('email-err');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  err.textContent = '';

  if (email.validity.valueMissing) {
    err.textContent = 'Email is required.';
    email.focus();
    return;
  }
  if (email.validity.typeMismatch) {
    err.textContent = 'Enter a valid email address.';
    email.focus();
    return;
  }
  // Submit...
});
</script>

Сводка флагов ValidityState

Все флаги ValidityState:

  • valueMissing — обязательное поле пусто
  • typeMismatch — неверный формат типа
  • patternMismatch — регулярное выражение шаблона не подходит
  • tooShort / tooLong — ограничения minlength/maxlength
  • rangeUnderflow / rangeOverflow — ограничения min/max
  • stepMismatch — недопустимое значение шага
  • customError — задано сообщение setCustomValidity
  • badInput — браузер не может разобрать значение

Быстрая проверка

Как программно показать встроенное всплывающее сообщение браузера об ошибке проверки?

Повторение: API проверки ограничений

Основные сведения об API проверки ограничений:

  • input.validity — объект ValidityState с определёнными флагами
  • checkValidity() — возвращает true/false, вызывает событие invalid
  • reportValidity() — проверяет значение и показывает встроенный интерфейс ошибки
  • validationMessage — строка с ошибкой браузера
  • setCustomValidity(msg) — устанавливает пользовательскую ошибку; пустая строка сбрасывает её

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

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

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

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

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

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

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

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

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

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

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

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

  1. required pattern min max и maxlength
  2. Атрибут novalidate
  3. Основы Constraint Validation API
  4. Проверка HTML5 и JavaScript: компромиссы
← Назад к HTML Academy