HTMLInputElement: метод setCustomValidity()

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

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

Метод HTMLInputElement.setCustomValidity() устанавливает пользовательское сообщение об ошибке валидации для элемента.

Синтаксис

setCustomValidity(message)

Параметры

message: Сообщение, используемое для ошибок валидации.

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

None (undefined).

Исключения

Нет.

Примеры

В этом примере мы передаем ID элемента ввода и устанавливаем разные сообщения об ошибках в зависимости от того, отсутствует ли значение, оно слишком мало или слишком велико. Обратите внимание, что сообщение не будет отображено немедленно. Попытка отправить форму отобразит сообщение, или вы можете вызвать метод reportValidity() для элемента.

function validate(inputID) {
  const input = document.getElementById(inputID);
  const validityState = input.validity;

  if (validityState.valueMissing) {
    input.setCustomValidity("You gotta fill this out, yo!");
  } else if (validityState.rangeUnderflow) {
    input.setCustomValidity("We need a higher number!");
  } else if (validityState.rangeOverflow) {
    input.setCustomValidity("That's too high!");
  } else {
    input.setCustomValidity("");
  }

  input.reportValidity();
}

Критчно установить сообщение в пустую строку, если ошибок нет. Пока сообщение об ошибке не пустое, форма не пройдёт валидацию и не будет отправлена.

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

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

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

	Рабочий стол					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`setCustomValidity`	4 Этот метод обновляет только всплывающее окно с ошибкой валидации, а не всплывающую подсказку, появляющуюся при наведении курсора на элемент, см. ошибка 41380670.	12	4	≤12.1	5	18 Этот метод обновляет только всплывающее окно с ошибкой валидации, а не всплывающую подсказку, появляющуюся при наведении курсора на элемент, см. ошибка 41380670.	4	≤12.1	4	1.0 Этот метод обновляет только всплывающее окно с ошибкой валидации, а не всплывающую подсказку, появляющуюся при наведении курсора на элемент, см. ошибка 41380670.	≤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/setCustomValidity