HTMLButtonElement: метод reportValidity()

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

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

Метод reportValidity() интерфейса HTMLButtonElement выполняет те же шаги проверки валидности, что и метод checkValidity(). Кроме того, если событие invalid не отменено, браузер отображает проблему пользователю.

Синтаксис

reportValidity()

Параметры

Нет.

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

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

Примеры

Этот пример демонстрирует, как сделать кнопку невалидной.

HTML

Создаём форму, содержащую несколько кнопок:

<form action="#" id="form" method="post">
  <p>
    <input type="submit" value="Submit" />
    <button id="example" type="submit" value="fixed">THIS BUTTON</button>
  </p>
  <p>
    <button type="button" id="report">reportValidity()</button>
  </p>
</form>

<p id="log"></p>

CSS

Добавляем немного CSS, включая стили :valid и :invalid для нашей кнопки:

input[type="submit"],
button {
  background-color: #33a;
  border: none;
  font-size: 1.3rem;
  padding: 5px 10px;
  color: white;
}
button:invalid {
  background-color: #a33;
}
button:valid {
  background-color: #3a3;
}

JavaScript

Включаем функцию для переключения значения, содержимого и сообщения об ошибке валидации для примера кнопки:

const reportButton = document.querySelector("#report");
const exampleButton = document.querySelector("#example");
const output = document.querySelector("#log");

reportButton.addEventListener("click", () => {
  const reportVal = exampleButton.reportValidity();
  output.innerHTML = `reportValidity returned: ${reportVal} <br/> custom error: ${exampleButton.validationMessage}`;
});

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

exampleButton.addEventListener("click", (e) => {
  e.preventDefault();
  if (exampleButton.value == "error") {
    breakOrFixButton("fixed");
  } else {
    breakOrFixButton("error");
  }
  output.innerHTML = `validation message: ${exampleButton.validationMessage} <br/> custom error: ${exampleButton.validationMessage}`;
});

const breakOrFixButton = () => {
  const state = toggleButton();
  if (state == "error") {
    exampleButton.setCustomValidity("This is a custom error message");
  } else {
    exampleButton.setCustomValidity("");
  }
};

const toggleButton = () => {
  if (exampleButton.value == "error") {
    exampleButton.value = "fixed";
    exampleButton.innerHTML = "No error";
  } else {
    exampleButton.value = "error";
    exampleButton.innerHTML = "Custom error";
  }
  return exampleButton.value;
};

Результаты

По умолчанию кнопка валидна. Активируйте «ЭТА КНОПКА», чтобы изменить значение, содержимое и добавить пользовательское сообщение об ошибке. Активирование кнопки «reportValidity()» проверяет валидность кнопки, сообщая пользователю пользовательское сообщение об ошибке и генерирует событие invalid в случае, если кнопка не проходит проверку валидности из-за сообщения.

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`reportValidity`	40	17	49	27	10.1	40	64	27	10.3	4.0	40

См. также

© 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/HTMLButtonElement/reportValidity