HTMLInputElement: invalid-Event
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2018.
Das invalid-Event wird ausgelöst, wenn ein übermittelbares Element auf seine Gültigkeit überprüft wurde und seine Einschränkungen nicht erfüllt.
Dieses Event kann nützlich sein, um bei der Übermittlung eines Formulars eine Zusammenfassung der Probleme anzuzeigen. Wenn ein Formular übermittelt wird, werden invalid-Events bei jedem Formular-Steuerelement ausgelöst, das ungültig ist. Die Gültigkeit der übermittelbaren Elemente wird vor der Übermittlung ihres zugehörigen <form>-Elements geprüft oder nachdem die Methode checkValidity() des Elements oder seines zugehörigen <form> aufgerufen wurde.
Sie wird nicht bei blur geprüft.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignisbehandlereigenschaft.
addEventListener("invalid", (event) => { })
oninvalid = (event) => { }
Ereignistyp
Ein generisches Event.
Beispiele
Wenn ein Formular mit einem ungültigen Wert übermittelt wird, werden die übermittelbaren Elemente überprüft und, wenn ein Fehler gefunden wird, wird das invalid-Event auf dem ungültigen Element ausgelöst. In diesem Beispiel wird das ungültige Event beim Auftreten, aufgrund eines ungültigen Werts im Eingabefeld, protokolliert.
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
| Specification |
|---|
| HTML # event-invalid |
| HTML # handler-oninvalid |