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 July 2015.

Das invalid Ereignis wird ausgelöst, wenn ein übermittelbares Element auf Gültigkeit geprüft wurde und seine Einschränkungen nicht erfüllt.

Dieses Ereignis kann nützlich sein, um bei der Übermittlung eines Formulars eine Zusammenfassung der Probleme anzuzeigen. Wenn ein Formular übermittelt wird, werden bei jedem Formularelement, das ungültig ist, invalid Ereignisse ausgelöst. Die Gültigkeit übermittelbarer Elemente wird vor der Übermittlung ihres Eigentümer-<form>-Elements oder nach dem Aufruf der checkValidity() Methode des Elements oder seines Eigentümer-<form> geprüft.

Es wird nicht bei blur überprüft.

Syntax

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

js
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 bei einem Fehler wird das invalid Ereignis beim invalid Element ausgelöst. In diesem Beispiel wird, wenn ein invalid 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

Specification
HTML Standard
# event-invalid
HTML Standard
# handler-oninvalid

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch