HTMLInputElement: метод reportValidity()

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

Нет.

Возвращает 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="report">reportValidity()</button>
  </p>
  <p id="log"></p>
</form>

JavaScript

При активации кнопки "reportValidity()", мы используем метод reportValidity() для проверки, соответствует ли значение ввода его ограничениям. Мы регистрируем возвращаемое значение. Если false, мы также отображаем сообщение об ошибке и регистрируем событие invalid.

const output = document.querySelector("#log");
const reportButton = document.querySelector("#report");
const ageInput = document.querySelector("#age");

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

reportButton.addEventListener("click", () => {
  const reportVal = ageInput.reportValidity();
  output.innerHTML = `"reportValidity()" returned: ${reportVal}`;
  if (!reportVal) {
    output.innerHTML += `<br />Validation message: "${ageInput.validationMessage}"`;
  }
});

Результаты

Если false, если значение отсутствует, меньше 21, больше 65 или по-другому невалидно, появляется сообщение об ошибке, генерируется событие invalid, и мы регистрируем это событие в консоли.

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

HTML

Мы добавляем кнопку "Исправить" в HTML из предыдущего примера.

<button type="button" id="fix">Fix issues</button>

JavaScript

Мы расширяем JavaScript из предыдущего базового примера, добавив функцию, которая использовала метод HTMLInputElement.setCustomValidity() для предоставления настраиваемых сообщений об ошибках. Функция validateAge() устанавливает сообщение об ошибке в пустую строку только в том случае, если входной параметр валиден И переменная enableValidation имеет значение true, где enableValidation равно false до активации кнопки "Исправить проблемы".

const output = document.querySelector("#log");
const reportButton = document.querySelector("#report");
const ageInput = document.querySelector("#age");
const fixButton = document.querySelector("#fix");
let enableValidation = false;

fixButton.addEventListener("click", (e) => {
  enableValidation = true;
  fixButton.innerHTML = "Error fixed";
  fixButton.disabled = true;
});

reportButton.addEventListener("click", () => {
  validateAge();
  const reportVal = ageInput.reportValidity();
  output.innerHTML = `"reportValidity()" returned: ${reportVal}`;
  if (!reportVal) {
    output.innerHTML += `<br />Validation message: "${ageInput.validationMessage}"`;
  }
});

const validateAge = () => {
  const validityState_object = ageInput.validity;
  if (validityState_object.valueMissing) {
    ageInput.setCustomValidity("Please set an age (required)");
  } else if (ageInput.rangeUnderflow) {
    ageInput.setCustomValidity("Your value is too low");
  } else if (ageInput.rangeOverflow) {
    ageInput.setCustomValidity("Your value is too high");
  } else if (enableValidation) {
    // sets to empty string if valid AND enableValidation has been set to true
    ageInput.setCustomValidity("");
  }
};

Результаты

Если активировать кнопку "reportValidity()" до ввода возраста, метод reportValidity() возвращает false , потому что он не соответствует ограничениям проверки валидности. Этот метод генерирует событие invalid для поля ввода и сообщает об ошибке пользователю, отображая настраиваемое сообщение об ошибке "Укажите возраст (обязательно)". Пока установлено настраиваемое сообщение об ошибке, активация кнопки "reportValidity()" будет продолжать отображать ошибку, даже если вы выберете действительный возраст. Для активации валидации необходимо установить настраиваемое сообщение об ошибке в пустую строку, что делается нажатием на кнопку "Исправить проблемы".

• HTMLInputElement.checkValidity()
• <input>
• <form>
• Урок: Клиентская валидация форм
• Руководство: Проверка ограничений
• Псевдоклассы CSS :valid и :invalid