недействительное событие
Пример
Предупреждать некоторый текст, если поле ввода недействительно:
<input type="text" oninvalid="alert('You must fill out the form!');" required>
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Событие oninvalid возникает, когда отправляемый элемент <input> недействителен.
Например, поле ввода является недействительным, если установлен обязательный атрибут, а поле пусто (требуемый атрибут указывает, что поле ввода должно быть заполнено перед отправкой формы).
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это событие.
| Event | |||||
|---|---|---|---|---|---|
| oninvalid | Yes | 10.0 | Yes | Yes | Yes |
Синтаксис
В HTML:
<element oninvalid="myScript">
В JavaScript:
object.oninvalid = function(){myScript};
В JavaScript с помощью метода addEventListener():
object.addEventListener("invalid", myScript);
Примечание. Метод addEventListener() не поддерживается в Internet Explorer 8 и более ранних версиях.
Технические детали
| Пузыри: | Нет |
|---|---|
| Отменяемо: | да |
| Тип события: | Событие |
| Поддерживаемые HTML-теги: | <ввод> |
| Версия ДОМ: | События уровня 3 |
Дополнительные примеры
Пример
Предупредить текст, если поле ввода содержит менее 6 символов:
Name: <input type="text" id="myInput" name="fname" pattern=".{6,}"
required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("Must contain 6 or more characters");
}
</script>
Пример
Предупреждать текст, если поле ввода содержит число меньше 2 или больше 5:
Number: <input type="number" id="myInput" name="quantity" min="2" max="5"
required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("You must pick a number between 2 and 5. You chose: " + this.value);
}
</script>
Связанные страницы
Учебник по JavaScript: Формы JavaScript