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 Dezember 2018.
Das invalid-Ereignis wird ausgelöst, wenn ein übermittelbares Element auf Gültigkeit überprüft wurde und die Bedingungen nicht erfüllt.
Dieses Ereignis kann nützlich sein, um beim Absenden eines Formulars eine Zusammenfassung der Probleme anzuzeigen. Wenn ein Formular übermittelt wird, werden invalid-Ereignisse bei jedem Formularsteuerelement ausgelöst, das ungültig ist. Die Gültigkeit von übermittelbaren Elementen wird vor dem Absenden ihres Besitzer-<form> überprüft oder nachdem die checkValidity()-Methode des Elements oder seines Besitzer-<form> aufgerufen wurde.
Es wird nicht bei blur überprüft.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("invalid", (event) => { })
oninvalid = (event) => { }
Ereignistyp
Ein generisches Event.
Beispiele
Wenn ein Formular mit einem ungültigen Wert gesendet wird, werden die übermittelbaren Elemente überprüft und, wenn ein Fehler gefunden wird, wird das invalid-Ereignis auf dem invalid-Element ausgelöst. In diesem Beispiel wird, wenn ein ungültiges Ereignis aufgrund eines ungültigen Werts im Eingabefeld ausgelöst wird, der ungültige Wert 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 |
Browser-Kompatibilität
Loading…