HTMLSelectElement.willValidate — Eigenschaft · JavaScript-Referenz

Signatur

get HTMLSelectElement.willValidate

Beschreibung

Die Eigenschaft willValidate gibt true zurück, wenn das <select>-Element ein Kandidat für die Einschränkungsvalidierung ist. Nur solche Elemente werden von form.checkValidity(), form.reportValidity() und beim Absenden des Formulars geprüft. Ob das Element gerade gültig ist, sagt die Eigenschaft nicht aus – dafür gibt es validity bzw. checkValidity().

Ein <select> wird von der Validierung ausgeschlossen (willValidate === false), wenn:

es das Attribut disabled trägt,
es in einem deaktivierten <fieldset disabled> liegt (außer im ersten <legend>),
es einen <datalist>-Vorfahren hat.

Typische Einsatzfälle sind eigene Validierungsroutinen: Man durchläuft form.elements und prüft nur Felder, bei denen willValidate wahr ist. So vermeidet man, dass deaktivierte Auswahllisten fälschlich als Fehler gemeldet werden – denn checkValidity() liefert für ausgeschlossene Elemente ohnehin immer true.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Element an der Einschränkungsvalidierung teilnimmt, sonst false.

Beispiele

Einfache Abfrage für aktive und deaktivierte Auswahl

// HTML: <select id="land" required>…</select>
//       <select id="region" disabled>…</select>
const land = document.querySelector('#land');
const region = document.querySelector('#region');

console.log(land.willValidate);   // aktiv
console.log(region.willValidate); // deaktiviert

true false

Eigene Validierung nur für relevante Auswahllisten

const form = document.querySelector('#bestellung');

form.addEventListener('submit', (event) => {
  const fehler = [...form.elements]
    .filter((el) => el instanceof HTMLSelectElement)
    .filter((select) => select.willValidate && !select.checkValidity())
    .map((select) => select.name);

  if (fehler.length > 0) {
    event.preventDefault();
    console.warn('Bitte auswählen:', fehler.join(', '));
  }
});

Bitte auswählen: versandart

Auswirkung eines deaktivierten fieldset

const fieldset = document.createElement('fieldset');
const select = document.createElement('select');
select.required = true;
fieldset.append(select);
document.body.append(fieldset);

console.log(select.willValidate); // true
fieldset.disabled = true;
console.log(select.willValidate); // false – von Validierung ausgeschlossen
console.log(select.checkValidity()); // true, obwohl leer und required

true false true

// Wichtig · Fallstricke

Nicht mit Gültigkeit verwechseln: willValidate === true heißt nur „wird geprüft“, nicht „ist gültig“. Den Zustand liefert validity.valid.
Per CSS versteckte Elemente (display: none) bleiben Kandidaten – ein verstecktes required-Select kann das Absenden blockieren, ohne dass der Browser eine sichtbare Meldung anzeigen kann („An invalid form control is not focusable“).
Das Attribut novalidate am Formular ändert willValidate nicht; es unterdrückt nur die automatische Prüfung beim Absenden.
Die Eigenschaft ist schreibgeschützt; Zuweisungen werden stillschweigend ignoriert (im Strict Mode TypeError).
Kompatibilität: in allen modernen Browsern verfügbar, auch in älteren wie IE 10+.

Siehe auch

HTMLSelectElement.disabled HTMLSelectElement.validity HTMLSelectElement.value HTMLSelectElement.multiple HTMLSelectElement.autocomplete