ValidityState: свойство customError

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

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

Только для чтения customError свойство интерфейса ValidityState возвращает true , если элемент не соответствует требованиям валидации, заданным в наборе пользовательской валидации методом элемента setCustomValidity().

Значение

Булево значение, которое равно true , если пользовательское сообщение об ошибке установлено непустой строкой.

Примеры

Обнаружение пользовательской ошибки

В этом примере, setCustomValidity() устанавливает пользовательское сообщение об ошибке, когда отправка формы содержит данные пользователя, которые считаются недопустимыми. Кнопка «Проверить ввод» вызывает reportValidity(), которая отображает сообщение о валидации под элементом, если пользователь вводит значения, которые не соответствуют ограничениям формы.

Если вы введете текст «хорошо» или «отлично» и попробуете проверить ввод, поле будет помечено как недопустимое, пока пользовательское сообщение об ошибке не будет очищено (установлено в пустую строку). Для сравнения, есть атрибут minlength на элементе ввода, который позволяет продемонстрировать tooShort состояние валидации, когда пользователь вводит меньше двух символов. Когда значение в элементе управления формы является недопустимым, даже если нет пользовательской ошибки, у ввода будет красная рамка.

HTML

<pre id="log">Validation failures logged here...</pre>
<input
  type="text"
  id="userInput"
  placeholder="How do you feel?"
  minlength="2" />
<button id="checkButton">Validate input</button>

CSS

input:invalid {
  border: red solid 3px;
}

JavaScript

const userInput = document.getElementById("userInput");
const checkButton = document.getElementById("checkButton");
const logElement = document.getElementById("log");

function log(text) {
  logElement.innerText = text;
}

const check = (input) => {
  // Handle cases where input is too vague
  if (input.value == "good" || input.value == "fine") {
    input.setCustomValidity(`"${input.value}" is not a feeling.`);
  } else {
    // An empty string resets the custom validity state
    input.setCustomValidity("");
  }
};

userInput.addEventListener("input", () => {
  check(userInput);
});

const validateInput = () => {
  userInput.reportValidity();
  if (userInput.validity.customError) {
    // We can handle custom validity states here
    log("Custom validity error: " + userInput.validationMessage);
  } else {
    log(userInput.validationMessage);
  }
};

checkButton.addEventListener("click", validateInput);

Результат

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

Спецификация
HTML # dom-validitystate-customerror-dev

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`customError`	4	12	4	12.1	5	18	4	12.1	5	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/ValidityState/customError