ValidityState: valueMissing Eigenschaft

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.

Die schreibgeschützte valueMissing-Eigenschaft des ValidityState Interfaces zeigt an, ob ein erforderliches required Steuerelement, wie ein <input>, <select> oder <textarea>, einen leeren Wert hat.

Wenn das required-Attribut gesetzt ist und keine <option> ausgewählt ist oder ein <textarea> oder ein benutzerbearbeitbares <input> leer ist, wird die valueMissing-Eigenschaft true sein. Die Eigenschaft ist nur true, wenn das Feld erforderlich ist und keinen Wert hat; ist das Feld nicht erforderlich oder ist das Feld erforderlich und hat einen Wert, ist der Wert false.

Wert

Ein Boolean, der true ist, wenn der ValidityState nicht gesetzt ist und das required-Attribut gesetzt ist.

Fehlender erforderlicher Eingabewert

Das folgende Beispiel überprüft die Gültigkeit eines numerischen Eingabeelements. Beschränkungen wurden mit dem min-Attribut hinzugefügt, das einen Mindestwert von 18 für die Eingabe setzt, sowie mit dem required-Attribut, das leere Werte nicht zulässt. Wenn der Benutzer einen Wert eingibt, der keine Zahl größer als 17 ist, schlägt die Validierung der Beschränkung fehl, und die Stile, die mit :invalid übereinstimmen, werden angewendet.

css
input:invalid {
  outline: red solid 3px;
}
html
<pre id="log">Validation logged here...</pre>
<input type="number" id="age" min="18" required />
js
const userInput = document.getElementById("age");
const logElement = document.getElementById("log");

function log(text) {
  logElement.innerText = text;
}

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.valid) {
    log("Input OK…");
  } else if (userInput.validity.valueMissing) {
    log("Required field cannot be empty.");
  } else {
    log("Bad input detected: " + userInput.validationMessage);
  }
});

Spezifikationen

Specification
HTML
# dom-validitystate-valuemissing-dev

Browser-Kompatibilität

Siehe auch