HTMLSelectElement.validity — Eigenschaft · JavaScript-Referenz

Signatur

HTMLSelectElement.validity

Beschreibung

Die Eigenschaft validity eines HTMLSelectElement gibt ein ValidityState-Objekt zurück. Es beschreibt, ob das Auswahlfeld die Bedingungen der Constraint Validation API erfüllt. Jede Eigenschaft des Objekts ist ein Boolean, etwa valueMissing, customError oder das zusammenfassende valid.

Bei <select>-Elementen spielen vor allem zwei Zustände eine Rolle: valueMissing ist true, wenn das Attribut required gesetzt ist und keine Option mit nicht-leerem Wert gewählt wurde. customError ist true, wenn per setCustomValidity() eine eigene Fehlermeldung gesetzt wurde. Andere Flags wie tooShort, patternMismatch oder typeMismatch betreffen nur Eingabefelder und sind bei <select> immer false.

Einsatzgebiete: eigene Fehlermeldungen anzeigen, den Absende-Button abhängig vom Formularzustand freigeben, Fehlerzustände gezielt auswerten. Das Objekt ist „live“: Nach einer Änderung der Auswahl spiegelt dieselbe Referenz sofort den neuen Zustand wider.

Rückgabewert

Typ

ValidityState

Beschreibung

Ein Live-Objekt mit booleschen Eigenschaften wie valid, valueMissing und customError. Die Eigenschaft selbst ist schreibgeschützt.

Beispiele

Pflichtauswahl prüfen

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

console.log(select.validity.valueMissing); // noch nichts gewählt
console.log(select.validity.valid);

select.value = 'de';
console.log(select.validity.valueMissing);
console.log(select.validity.valid);

true false false true

Eigene Fehlermeldung beim Absenden anzeigen

const form = document.querySelector('#bestellung');
const versand = form.querySelector('select[name="versand"]');
const fehler = document.querySelector('#versand-fehler');

form.addEventListener('submit', (event) => {
  const { validity } = versand;
  if (!validity.valid) {
    event.preventDefault();
    fehler.textContent = validity.valueMissing
      ? 'Bitte wählen Sie eine Versandart.'
      : versand.validationMessage;
    versand.focus();
  } else {
    fehler.textContent = '';
  }
});

Geschäftsregel mit setCustomValidity() und customError

const zahlung = document.querySelector('#zahlung');
const land = document.querySelector('#land');

const pruefen = () => {
  // Beispielregel: Rechnungskauf nur in Deutschland
  if (zahlung.value === 'rechnung' && land.value !== 'de') {
    zahlung.setCustomValidity('Rechnungskauf ist nur in Deutschland möglich.');
  } else {
    zahlung.setCustomValidity(''); // Fehler zurücksetzen
  }
  console.log('customError:', zahlung.validity.customError);
};

zahlung.addEventListener('change', pruefen);
land.addEventListener('change', pruefen);

customError: true (bei Rechnung + Land ≠ de) customError: false (sonst)

// Wichtig · Fallstricke

valueMissing und leere Werte: Eine Platzhalter-Option zählt nur dann als „keine Auswahl“, wenn ihr value leer ist. Bei einem einfachen <select> (ohne multiple, size ≤ 1) muss sie außerdem die erste Option sein. Eine Option ohne value-Attribut übernimmt ihren Textinhalt als Wert und gilt dann als gültige Auswahl.
Eigenen Fehler zurücksetzen: Nach setCustomValidity('…') bleibt customError true, bis Sie setCustomValidity('') aufrufen. Wird das vergessen, lässt sich das Formular nicht mehr absenden.
Deaktivierte Elemente: Ist das Element disabled oder liegt es in einem deaktivierten <fieldset>, wird es nicht validiert. validity.valid kann dann true sein, obwohl nichts ausgewählt ist, weil willValidate false ist.
Nicht zuweisbar: validity ist schreibgeschützt. Eine Zuweisung wird ignoriert bzw. wirft im Strict Mode einen TypeError.
Die Prüfung auf dem Client ersetzt keine Prüfung auf dem Server. Werte lassen sich im Browser beliebig manipulieren.
Kompatibilität: Wird von allen modernen Browsern unterstützt, einschließlich Internet Explorer 10+.

Siehe auch

ValidityState HTMLSelectElement HTMLSelectElement.setCustomValidity() HTMLSelectElement.checkValidity() HTMLSelectElement.reportValidity() HTMLSelectElement.validationMessage HTMLSelectElement.willValidate HTMLInputElement.validity