HTMLInputElement.required — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.required

Beschreibung

Die Eigenschaft required spiegelt das gleichnamige HTML-Attribut eines <input>-Elements wider. Ist sie true, gilt das Feld als Pflichtfeld: Ein leeres Feld löst bei der Formularvalidierung den Zustand validity.valueMissing aus, und der Browser verhindert das Absenden des Formulars mit einer eingebauten Fehlermeldung.

Wenn Sie required per JavaScript setzen, wird das Attribut im DOM hinzugefügt bzw. entfernt (input.required = false entspricht removeAttribute('required')). Das ist praktisch für dynamische Formulare, in denen Felder nur unter bestimmten Bedingungen Pflicht sind, zum Beispiel eine Umsatzsteuer-ID nur bei Firmenkunden.

Die Eigenschaft wirkt nicht bei allen Eingabetypen gleich: Bei hidden, range, color sowie bei Schaltflächen-Typen (submit, reset, button, image) wird sie ignoriert. Bei checkbox muss das Feld angehakt sein, bei radio reicht es, wenn eine Option der gleichnamigen Gruppe gewählt ist. Pflichtfelder lassen sich mit den CSS-Pseudoklassen :required und :optional gestalten.

Parameter

Name	Typ	Default	Beschreibung
$value	boolean	false	Beim Setzen: `true` macht das Feld zum Pflichtfeld, `false` entfernt das Attribut. Andere Werte werden in einen booleschen Wert umgewandelt.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut required vorhanden ist, sonst false.

Beispiele

Pflichtfeld-Status auslesen und setzen

// HTML: <input id="email" type="email">
const email = document.querySelector('#email');

console.log(email.required); // false
email.required = true;
console.log(email.required); // true
console.log(email.hasAttribute('required')); // true

false true true

Feld abhängig von einer Auswahl zum Pflichtfeld machen

// HTML:
// <input type="checkbox" id="firma"> Firmenkunde
// <input id="ustId" name="ustId">
const firma = document.querySelector('#firma');
const ustId = document.querySelector('#ustId');

firma.addEventListener('change', () => {
  ustId.required = firma.checked;
  ustId.setAttribute('aria-required', String(firma.checked));
});

Fehlende Pflichtangaben vor dem Absenden prüfen

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

form.addEventListener('submit', (event) => {
  const missing = [...form.querySelectorAll('input')]
    .filter((input) => input.required && input.validity.valueMissing)
    .map((input) => input.name);

  if (missing.length > 0) {
    event.preventDefault();
    console.log('Bitte ausfüllen:', missing.join(', '));
  }
});

Bitte ausfüllen: name, email

// Wichtig · Fallstricke

Nur clientseitige Hilfe: required ersetzt keine serverseitige Prüfung. Nutzer können das Attribut über die Entwicklerwerkzeuge entfernen oder Anfragen direkt senden.
Die Prüfung wird übersprungen, wenn das Formular novalidate hat, der Absende-Button formnovalidate trägt oder das Feld disabled bzw. readonly ist. form.submit() per JavaScript umgeht die Validierung ebenfalls, form.requestSubmit() dagegen nicht.
Ein Wert, der nur aus Leerzeichen besteht, gilt als ausgefüllt. Für strengere Regeln verwenden Sie pattern oder setCustomValidity().
Bei hidden, range, color und Schaltflächen-Typen hat die Eigenschaft keine Wirkung.
Die Eigenschaft wird in allen modernen Browsern unterstützt. Die eingebauten Fehlermeldungen unterscheiden sich im Aussehen je nach Browser und lassen sich nicht direkt gestalten.

Siehe auch

ElementInternals.ariaRequired HTMLInputElement.capture HTMLInputElement.checked HTMLInputElement.disabled HTMLInputElement.files