ValidityState.valueMissing — Eigenschaft · JavaScript-Referenz

Signatur

ValidityState.valueMissing

Beschreibung

Die schreibgeschützte Eigenschaft valueMissing des ValidityState-Objekts zeigt an, ob ein Formularelement mit dem Attribut required keinen Wert hat. Sie ist true, wenn das Pflichtfeld leer ist, sonst false. Erreichbar ist sie über die Eigenschaft validity eines Elements, z. B. input.validity.valueMissing.

Die Bedeutung von „leer“ hängt vom Elementtyp ab:

Text-Eingaben und <textarea>: Der Wert ist ein leerer String.
Checkbox: Die Box ist nicht angehakt.
Radio-Gruppe: Kein Button der Gruppe (gleicher name) ist ausgewählt, sofern mindestens einer required trägt.
<select>: Die gewählte Option hat einen leeren value (typischerweise eine Platzhalter-Option).
type="file": Es wurde keine Datei ausgewählt.

Sinnvoll ist die Eigenschaft, wenn man eigene Fehlermeldungen anzeigen möchte: Statt der allgemeinen Browser-Meldung prüft man gezielt valueMissing und gibt z. B. „Bitte geben Sie Ihre E-Mail-Adresse ein.“ aus. Sobald ein Element mit valueMissing === true vorliegt, ist auch validity.valid gleich false, und das Formular wird ohne novalidate nicht abgeschickt.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Element required ist und keinen Wert hat, sonst false.

Beispiele

Pflichtfeld einfach prüfen

// HTML: <input id="name" required>
const input = document.querySelector('#name');

console.log(input.validity.valueMissing); // Feld leer

input.value = 'Anna';
console.log(input.validity.valueMissing); // Feld gefüllt

true false

Eigene Fehlermeldung beim Eingeben und Absenden

// HTML:
// <form id="kontakt">
//   <input type="email" id="email" required>
//   <span id="fehler" aria-live="polite"></span>
//   <button>Senden</button>
// </form>
const form = document.querySelector('#kontakt');
const email = document.querySelector('#email');
const fehler = document.querySelector('#fehler');

const pruefen = () => {
  const { validity } = email;
  if (validity.valueMissing) {
    email.setCustomValidity('Bitte geben Sie Ihre E-Mail-Adresse ein.');
  } else if (validity.typeMismatch) {
    email.setCustomValidity('Das ist keine gültige E-Mail-Adresse.');
  } else {
    email.setCustomValidity('');
  }
  fehler.textContent = email.validationMessage;
};

email.addEventListener('input', pruefen);
form.addEventListener('submit', (event) => {
  pruefen();
  if (!form.checkValidity()) {
    event.preventDefault();
    email.focus();
  }
});

Select mit Platzhalter und Checkbox

// HTML:
// <select id="land" required>
//   <option value="">Bitte wählen …</option>
//   <option value="de">Deutschland</option>
// </select>
// <input type="checkbox" id="agb" required>
const land = document.querySelector('#land');
const agb = document.querySelector('#agb');

console.log(land.validity.valueMissing); // Platzhalter gewählt
land.value = 'de';
console.log(land.validity.valueMissing);

console.log(agb.validity.valueMissing); // nicht angehakt
agb.checked = true;
console.log(agb.validity.valueMissing);

true false true false

// Wichtig · Fallstricke

Nur mit required: Ohne das Attribut ist valueMissing immer false, auch bei leerem Feld.
Leerzeichen zählen als Wert: Ein Textfeld mit " " gilt nicht als leer. Wer das verhindern will, braucht zusätzlich ein pattern (z. B. pattern=".*\S.*") oder eine eigene Prüfung.
Deaktivierte und schreibgeschützte Felder: Elemente mit disabled oder readonly sowie type="hidden" sind von der Validierung ausgenommen. Dort liefert valueMissing false.
setCustomValidity() zurücksetzen: Eine eigene Meldung setzt customError und macht das Feld ungültig, bis sie mit setCustomValidity('') gelöscht wird. Sonst bleibt das Formular blockiert, obwohl das Feld inzwischen gefüllt ist.
Clientseitige Prüfung reicht nicht: valueMissing dient nur der Benutzerfreundlichkeit. Pflichtfelder müssen auf dem Server immer erneut geprüft werden.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt. Bei Custom Elements erhält man den Wert über ElementInternals.validity, gesetzt wird er mit setValidity({ valueMissing: true }, …).

Siehe auch

ValidityState ValidityState.valid ValidityState.typeMismatch ValidityState.patternMismatch HTMLInputElement.setCustomValidity() HTMLFormElement.checkValidity()