HTMLInputElement: invalid Event

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 ü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.

In diesem Artikel

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

js
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

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

js
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

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Siehe auch

HTML <form>-Element
Verwandtes Ereignis: submit
CSS :invalid-Pseudoklasse

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

HTML DOM API
HTMLInputElement
Instanzeigenschaften
Instanzmethoden
Events
Vererbung
Verwandte Seiten für HTML DOM
Anleitungen
1. Verwenden von Microtasks in JavaScript mit queueMicrotask()
2. Im Detail: Microtasks und die JavaScript-Laufzeitumgebung