HTMLSelectElement.reportValidity() — Methode · JavaScript-Referenz

Signatur

HTMLSelectElement.prototype.reportValidity()

Beschreibung

Die Methode reportValidity() des HTMLSelectElement-Interface führt dieselben Prüfschritte aus wie checkValidity(). Der Unterschied: Ist das Element ungültig, wird dem Nutzer das Problem zusätzlich direkt angezeigt. Der Browser blendet seine eigene Fehlermeldung ein, meist als Sprechblase am Feld, und setzt in vielen Browsern auch den Fokus auf das Element.

Ein <select> ist zum Beispiel ungültig, wenn es das Attribut required hat und die ausgewählte Option einen leeren value besitzt (typisch bei einer Platzhalter-Option wie „Bitte wählen…“). Ungültig ist es auch, wenn mit setCustomValidity() eine eigene Fehlermeldung gesetzt wurde. Bei einem ungültigen Element wird vor der Anzeige ein abbrechbares invalid-Event am Element ausgelöst.

Sinnvoll ist die Methode immer dann, wenn du selbst entscheidest, wann geprüft wird, und nicht erst beim Absenden des Formulars. Beispiele sind mehrstufige Formulare (Wizard), Prüfungen beim Verlassen eines Feldes oder das Absenden per fetch() ohne echten submit. Willst du nur prüfen, ohne dass der Nutzer etwas sieht, nimm checkValidity().

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Element gültig ist oder nicht an der Validierung teilnimmt (z. B. bei disabled). Sonst false. In diesem Fall wurden auch das invalid-Event und die Fehleranzeige ausgelöst.

Beispiele

Pflichtauswahl vor dem nächsten Wizard-Schritt prüfen

// HTML:
// <select id="land" required>
//   <option value="">Bitte wählen…</option>
//   <option value="de">Deutschland</option>
//   <option value="at">Österreich</option>
// </select>
// <button id="weiter">Weiter</button>

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

weiter.addEventListener('click', () => {
  if (!land.reportValidity()) {
    // Browser zeigt die Meldung an, z. B. „Wählen Sie ein Element aus der Liste aus.“
    console.log('Schritt 1 unvollständig');
    return;
  }
  console.log(`Weiter mit Land: ${land.value}`);
});

Schritt 1 unvollständig // wenn nichts gewählt wurde Weiter mit Land: de // nach Auswahl von „Deutschland“

Eigene Fehlermeldung mit setCustomValidity()

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

const pruefeVersand = () => {
  // Expressversand nur innerhalb Deutschlands
  if (versand.value === 'express' && land.value !== 'de') {
    versand.setCustomValidity('Expressversand ist nur nach Deutschland möglich.');
  } else {
    versand.setCustomValidity(''); // Fehler zurücksetzen – wichtig!
  }
  return versand.reportValidity();
};

versand.addEventListener('change', pruefeVersand);
land.addEventListener('change', pruefeVersand);

invalid-Event abfangen und eigene Anzeige verwenden

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

kategorie.addEventListener('invalid', (event) => {
  event.preventDefault(); // Standard-Sprechblase des Browsers unterdrücken
  hinweis.textContent = kategorie.validationMessage;
  kategorie.classList.add('fehler');
});

kategorie.addEventListener('change', () => {
  hinweis.textContent = '';
  kategorie.classList.remove('fehler');
});

const speichern = async () => {
  if (!kategorie.reportValidity()) return;
  await fetch('/api/artikel', {
    method: 'POST',
    body: JSON.stringify({ kategorie: kategorie.value }),
    headers: { 'Content-Type': 'application/json' }
  });
};

document.querySelector('#speichern').addEventListener('click', speichern);

// Wichtig · Fallstricke

Platzhalter-Option: required greift nur, wenn die gewählte Option einen leeren value hat (value="") und die erste Option ist. Bei multiple oder size > 1 muss sie außerdem ein direktes Kind des <select> sein. Fehlt das value-Attribut, zählt stattdessen der Textinhalt als Wert. Dann ist das Feld gültig.
setCustomValidity() zurücksetzen: Eine gesetzte eigene Meldung bleibt bestehen, bis du setCustomValidity('') aufrufst. Sonst bleibt das Feld dauerhaft ungültig.
Keine Prüfung bei deaktivierten Feldern: Elemente mit disabled oder innerhalb eines deaktivierten <fieldset> nehmen nicht an der Validierung teil. Die Methode gibt dann immer true zurück.
novalidate: novalidate am Formular verhindert nur die automatische Prüfung beim Absenden. Ein manueller Aufruf von reportValidity() prüft trotzdem.
Unsichtbare Elemente: Ist das Element versteckt (z. B. display: none), kann der Browser die Meldung nicht anzeigen. Die Methode gibt dennoch false zurück.
Browser-Unterschiede: Aussehen, Text und Position der Meldung hängen vom Browser ab. Ob der Fokus gesetzt wird, auch. Für eine einheitliche Darstellung rufst du im invalid-Event preventDefault() auf und zeigst die Meldung selbst an.
Nur eine Hilfe für Nutzer: Die Prüfung im Browser ersetzt keine Validierung auf dem Server. Sie lässt sich leicht umgehen.

Siehe auch

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