ValidityState: Eigenschaft `valueMissing`

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 zeigt an, ob ein Steuerungselement mit dem Attribut required wie z. B. 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; 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 der ValidityState nicht festgelegt ist und das required-Attribut geltend ist.

Fehlender erforderlicher Eingabewert

Das folgende Beispiel überprüft die Gültigkeit eines numerischen Eingabeelements. Es wurden Einschränkungen mithilfe des min-Attributs 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 Einschränkungsvalidierung 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