HTMLSelectElement.checkValidity() — Methode · JavaScript-Referenz

Signatur

HTMLSelectElement.prototype.checkValidity()

Beschreibung

checkValidity() führt die Einschränkungsvalidierung (Constraint Validation) für ein <select>-Element aus. Die Methode gibt true zurück, wenn das Element gültig ist, und sonst false. Bei <select> sind vor allem zwei Regeln wichtig: das Attribut required (es muss eine Option mit nicht leerem Wert ausgewählt sein) und eigene Fehlermeldungen, die über setCustomValidity() gesetzt wurden.

Ist das Element ungültig, löst die Methode am Element zusätzlich ein abbrechbares invalid-Event aus. Anders als reportValidity() zeigt checkValidity() dem Nutzer keine Fehlermeldung des Browsers an. Die Methode eignet sich deshalb gut für eigene Validierungsoberflächen, etwa um einen Absende-Button zu aktivieren oder eigene Fehlertexte anzuzeigen.

Wenn Sie wissen möchten, warum das Element ungültig ist, lesen Sie die Eigenschaft validity (ein ValidityState-Objekt, z. B. validity.valueMissing) oder validationMessage aus. Elemente, die von der Validierung ausgeschlossen sind (z. B. mit disabled oder innerhalb eines deaktivierten <fieldset>), gelten immer als gültig.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Element alle Einschränkungen erfüllt oder von der Validierung ausgeschlossen ist; sonst false. In diesem Fall wird zusätzlich ein invalid-Event ausgelöst.

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 land = document.querySelector('#land');

console.log(land.checkValidity());          // Platzhalter ist ausgewählt
console.log(land.validity.valueMissing);

land.value = 'de';
console.log(land.checkValidity());

false true true

Absende-Button nur bei gültiger Auswahl aktivieren

const select = document.querySelector('#zahlungsart');
const button = document.querySelector('#absenden');

const aktualisieren = () => {
  button.disabled = !select.checkValidity();
};

select.addEventListener('change', aktualisieren);
aktualisieren(); // Anfangszustand setzen

Eigene Regel mit setCustomValidity und invalid-Event

const versand = document.querySelector('#versand');
const fehler = document.querySelector('#versand-fehler');

versand.addEventListener('invalid', (event) => {
  event.preventDefault(); // Standardverhalten des Browsers unterdrücken
  fehler.textContent = versand.validationMessage;
});

const pruefeVersand = (landCode) => {
  if (versand.value === 'express' && landCode !== 'de') {
    versand.setCustomValidity('Expressversand ist nur innerhalb Deutschlands möglich.');
  } else {
    versand.setCustomValidity(''); // Fehler zurücksetzen
    fehler.textContent = '';
  }
  return versand.checkValidity();
};

console.log(pruefeVersand('at'));

false

// Wichtig · Fallstricke

Keine sichtbare Rückmeldung: checkValidity() zeigt keine Browser-Fehlermeldung an. Dafür gibt es reportValidity().
Platzhalter-Option: required greift bei einer leeren ersten Option nur, wenn sie value="" hat und die erste Option eines Einfachauswahl-Selects ohne multiple und mit size ≤ 1 ist. Bei multiple muss mindestens eine Option ausgewählt sein.
Fehler aus setCustomValidity bleibt bestehen: Ein mit setCustomValidity('…') gesetzter Fehler gilt so lange, bis Sie ihn mit setCustomValidity('') zurücksetzen. Wird das vergessen, bleibt das Feld dauerhaft ungültig.
Das invalid-Event: Die Methode löst bei jedem Aufruf mit ungültigem Ergebnis ein invalid-Event aus. Rufen Sie sie häufig auf (z. B. bei jedem change), können mehrfach registrierte Handler unerwartet oft laufen.
Deaktivierte Elemente (disabled) sind von der Validierung ausgeschlossen und liefern immer true.
Die clientseitige Validierung ersetzt keine Prüfung auf dem Server, denn sie lässt sich leicht umgehen.
Die Methode wird von allen modernen Browsern unterstützt, auch vom Internet Explorer ab Version 10.

Siehe auch

HTMLSelectElement.reportValidity() HTMLSelectElement.setCustomValidity() HTMLSelectElement.namedItem() HTMLSelectElement.add() HTMLSelectElement.remove()