HTMLInputElement: invalid-Ereignis
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Dezember 2018 browserübergreifend verfügbar.
Das Ereignis invalid wird ausgelöst, wenn ein absendbares Element auf Gültigkeit geprüft wurde und seine Einschränkungen nicht erfüllt.
Dieses Ereignis kann nützlich sein, um beim Absenden eines Formulars eine Zusammenfassung der Probleme anzuzeigen. Wenn ein Formular abgesendet wird, wird für jedes ungültige Formularsteuerelement ein invalid-Ereignis ausgelöst. Die Gültigkeit absendbarer Elemente wird geprüft, bevor das zugehörige <form> abgesendet wird oder nachdem die Methode checkValidity() des Elements oder des zugehörigen <form> aufgerufen wurde.
Beim Ereignis blur erfolgt keine Gültigkeitsprüfung.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder legen Sie eine Event-Handler-Eigenschaft fest.
addEventListener("invalid", (event) => { })
oninvalid = (event) => { }
Ereignistyp
Ein generisches Event.
Beispiele
Wenn ein Formular mit einem ungültigen Wert abgesendet wird, werden die absendbaren Elemente geprüft. Wird ein Fehler festgestellt, wird für das ungültige Element das Ereignis invalid ausgelöst. In diesem Beispiel wird der ungültige Wert protokolliert, wenn aufgrund eines ungültigen Werts im Eingabefeld ein invalid-Ereignis ausgelöst wird.
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,
);
});
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # event-invalid |
| HTML # handler-oninvalid |