HTMLInputElement: метод checkValidity()

Базовая Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с декабря 2018 года.

Метод checkValidity() интерфейса HTMLInputElement возвращает логическое значение, указывающее, соответствует ли элемент правилам валидации ограничений, применённым к нему. Если значение ложно, метод также вызывает событие invalid в элементе. Так как для checkValidity() нет стандартного поведения браузера, отмена этого события invalid не имеет эффекта.

Примечание: Элемент HTML <input> с ненулевым validationMessage считается невалидным, соответствует псевдоклассу CSS :invalid и заставит checkValidity() вернуть false. Используйте метод HTMLInputElement.setCustomValidity() для установки HTMLInputElement.validationMessage в пустую строку, чтобы установить состояние validity в валидное.

Синтаксис

checkValidity()

Параметры

Нет.

Возвращаемое значение

Возвращает true если значение элемента не имеет проблем с валидностью; в противном случае возвращает false.

Примеры

HTML

Мы включаем форму, содержащую поле для числа, требуемого для заполнения, и две кнопки: одну для проверки формы и другую для её отправки.

<form action="#" method="post">
  <p>
    <label for="age">Your (21 to 65) </label>
    <input type="number" name="age" required id="age" min="21" max="65" />
  </p>
  <p>
    <button type="submit">Submit</button>
    <button type="button" id="check">checkValidity()</button>
  </p>
  <p id="log"></p>
</form>

JavaScript

const output = document.querySelector("#log");
const checkButton = document.querySelector("#check");
const ageInput = document.querySelector("#age");

ageInput.addEventListener("invalid", () => {
  console.log("Invalid event fired.");
});

checkButton.addEventListener("click", () => {
  const checkVal = ageInput.checkValidity();
  output.innerHTML = `checkValidity returned: ${checkVal}`;
});

Результаты

При false, если значение отсутствует, меньше 21, больше 65 или иным образом невалидно, событие invalid будет записано в консоль. Чтобы сообщить об ошибке пользователю, используйте HTMLInputElement.reportValidity() вместо этого.

Спецификации

Спецификация
HTML # dom-cva-checkvalidity-dev

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`checkValidity`	4	12	4	≤12.1	5	18	4	≤12.1	4	1.0	≤37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity