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 der ValidityState-Schnittstelle gibt an, ob ein mit required gekennzeichnetes 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 benutzerbearbeitbares <input> leer ist, wird die valueMissing-Eigenschaft true. Die Eigenschaft ist nur dann true, wenn das Feld erforderlich ist und keinen Wert hat; wenn das Feld nicht erforderlich ist oder wenn das Feld erforderlich ist und einen Wert hat, ist der Wert false.

Wert

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

Fehlender erforderlicher Eingabewert

Im folgenden Beispiel wird die Gültigkeit eines numrischen Eingabeelements überprüft. Einschränkungen wurden durch das min-Attribut hinzugefügt, das einen Mindestwert von 18 für die Eingabe festlegt, und das 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 Einschränkungen fehl und die Stile, die :invalid entsprechen, 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 Standard
# dom-validitystate-valuemissing-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch