HTMLInputElement: событие invalid

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

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

Событие invalid срабатывает, когда проверяемый элемент формы не удовлетворяет своим ограничениям.

Это событие может быть полезным для отображения сводки проблем с формой при отправке. При отправке формы событие invalid срабатывает для каждого элемента управления формы, который не валиден. Проверка валидности элементов формы выполняется до отправки их родительской <form>, или после вызова метода checkValidity() элемента или его родителя <form>.

Она не проверяется при blur.

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или задайте свойство обработчика события.

addEventListener("invalid", (event) => {});

oninvalid = (event) => {};

Тип события

Общее Event.

Примеры

Если форма отправляется с невалидным значением, проверяемые элементы формы проверяются и, если ошибка найдена, событие invalid будет срабатывать на элементе invalid. В этом примере, когда срабатывает событие invalid из-за невалидного значения в поле ввода, невалидное значение регистрируется.

HTML

<form action="#">
  <div>
    <label>
      Enter an integer between 1 and 10:
      <input type="number" min="1" max="10" required />
    </label>
  </div>
  <div><input type="submit" value="submit" /></div>
</form>
<hr />
Invalid values:
<ul id="log"></ul>

JavaScript

const input = document.querySelector("input");
const log = document.getElementById("log");

input.addEventListener("invalid", (e) => {
  log.appendChild(document.createElement("li")).textContent = JSON.stringify(
    e.target.value,
  );
});

Результат

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

Спецификация
HTML # event-invalid
HTML # handler-oninvalid

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`invalid_event`	10	12	4	10	5	18	64	12	5	4.0	4

См. также

Элемент HTML <form>
Связанное событие: submit
Псевдокласс CSS :invalid

© 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/invalid_event