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 invalid-Ereignis 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 eine Zusammenfassung der Probleme mit einem Formular 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 seines zugehörigen <form> aufgerufen wurde.
Beim Ereignis blur wird die Gültigkeit nicht geprüft.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("invalid", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
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 gefunden, wird auf dem ungültigen Element das invalid-Ereignis ausgelöst. In diesem Beispiel wird der ungültige Wert protokolliert, wenn das Ereignis aufgrund eines ungültigen Werts im Eingabefeld 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 |