HTMLSelectElement.required — Eigenschaft · JavaScript-Referenz

Signatur

HTMLSelectElement.required

Beschreibung

Die Eigenschaft required von HTMLSelectElement liest und setzt das gleichnamige HTML-Attribut. Ist sie true, gilt das Auswahlfeld als Pflichtfeld. Die eingebaute Formularvalidierung verhindert das Absenden, solange keine Option mit einem nicht-leeren value ausgewählt ist.

Setzt man select.required = true, wird das Attribut required="" hinzugefügt. Bei false wird es entfernt. Ob das Feld die Bedingung erfüllt, zeigen select.validity.valueMissing und die CSS-Pseudoklassen :required, :invalid und :valid.

Typischer Einsatz: Pflichtauswahlen wie „Land“ oder „Anrede“, die nur unter bestimmten Bedingungen gelten und deshalb per Skript an- und abgeschaltet werden. Wichtig ist eine Platzhalter-Option mit value="" als erste Option. Nur dann kann ein einfaches Auswahlfeld überhaupt ungültig sein.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut required gesetzt ist, sonst false. Beim Schreiben wird das Attribut entsprechend hinzugefügt oder entfernt.

Beispiele

Pflichtstatus lesen und setzen

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

land.required = true;
console.log(land.required, land.hasAttribute('required'));
console.log(land.validity.valueMissing);

false true true true

Pflichtfeld abhängig von einer Checkbox

// HTML: <input type="checkbox" id="lieferung"> <select id="versand"><option value="">–</option><option value="dhl">DHL</option></select>
const lieferung = document.querySelector('#lieferung');
const versand = document.querySelector('#versand');

const aktualisieren = () => {
  versand.required = lieferung.checked;
  versand.disabled = !lieferung.checked;
};

lieferung.addEventListener('change', aktualisieren);
aktualisieren();

Eigene Fehlermeldung vor dem Absenden

const form = document.querySelector('form');
const anrede = form.querySelector('select[name="anrede"]');
anrede.required = true;

form.addEventListener('submit', (event) => {
  if (anrede.validity.valueMissing) {
    event.preventDefault();
    anrede.setCustomValidity('Bitte eine Anrede auswählen.');
    anrede.reportValidity();
  }
});

anrede.addEventListener('change', () => anrede.setCustomValidity(''));

// Wichtig · Fallstricke

Platzhalter-Option nötig: Bei einem einfachen <select> (ohne multiple, size ≤ 1) ist die erste Option standardmäßig ausgewählt. Hat sie einen nicht-leeren Wert, ist das Feld immer gültig, und required bewirkt nichts. Die erste Option braucht deshalb value="".
Eine Option ohne value-Attribut übernimmt ihren Textinhalt als Wert. <option>Bitte wählen</option> ist also nicht leer.
Bei multiple ist das Feld ungültig, wenn keine Option ausgewählt ist.
Deaktivierte Felder (disabled) werden nicht validiert. Ein Formular mit novalidate oder ein Button mit formnovalidate umgeht die Prüfung ebenfalls.
Die Prüfung im Browser ersetzt keine Validierung auf dem Server, denn sie lässt sich leicht umgehen.
Die Eigenschaft wird in allen modernen Browsern unterstützt.

Siehe auch

HTMLSelectElement.disabled HTMLSelectElement.size HTMLSelectElement.value HTMLSelectElement.form HTMLSelectElement.length