HTMLTextAreaElement.required — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTextAreaElement.required

Beschreibung

Die Eigenschaft required des HTMLTextAreaElement spiegelt das gleichnamige HTML-Attribut wider. Ist sie true, darf das mehrzeilige Textfeld beim Absenden des Formulars nicht leer sein. Andernfalls blockiert der Browser das Absenden, zeigt eine Fehlermeldung an und löst am Element das Ereignis invalid aus.

Die Eigenschaft ist lesbar und schreibbar. Setzt man textarea.required = true, fügt der Browser das Attribut required ins DOM ein. Bei false entfernt er es wieder. Damit kann man Pflichtfelder abhängig vom Formularzustand ein- und ausschalten, zum Beispiel wenn ein Kommentar nur bei einer bestimmten Auswahl nötig ist.

Ob die Bedingung erfüllt ist, zeigt textarea.validity.valueMissing. Solange das Feld leer ist, trifft außerdem die CSS-Pseudoklasse :invalid zu. Für jedes Pflichtfeld gilt zusätzlich :required, für die übrigen :optional.

Rückgabewert

Typ

boolean

Beschreibung

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

Beispiele

Pflichtstatus lesen und setzen

const textarea = document.createElement('textarea');
console.log(textarea.required);

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

false true true true

Begründung nur bei Ablehnung verpflichtend

// HTML: <form id="feedback">
//   <select name="status"><option>angenommen</option><option>abgelehnt</option></select>
//   <textarea name="reason"></textarea>
//   <button>Senden</button>
// </form>
const form = document.querySelector('#feedback');
const status = form.elements.status;
const reason = form.elements.reason;

const updateRequired = () => {
  reason.required = status.value === 'abgelehnt';
  reason.placeholder = reason.required
    ? 'Bitte Begründung angeben (Pflicht)'
    : 'Optionaler Kommentar';
};

status.addEventListener('change', updateRequired);
updateRequired();

Eigene Fehlermeldung bei leerem Pflichtfeld

const message = document.querySelector('textarea[name="message"]');
message.required = true;

message.addEventListener('invalid', () => {
  if (message.validity.valueMissing) {
    message.setCustomValidity('Bitte schreiben Sie uns eine Nachricht.');
  }
});

// Meldung beim Tippen zurücksetzen, sonst bleibt das Feld ungültig
message.addEventListener('input', () => message.setCustomValidity(''));

console.log(message.checkValidity());

false

// Wichtig · Fallstricke

Nur Leerzeichen zählen als Wert: Besteht der Inhalt ausschließlich aus Leerzeichen oder Zeilenumbrüchen, gilt das Feld trotzdem als ausgefüllt. Wer das verhindern will, prüft zusätzlich value.trim() und setzt bei Bedarf eine Meldung mit setCustomValidity(). Das Attribut pattern hilft hier nicht, denn <textarea> unterstützt es nicht.
Deaktivierte und schreibgeschützte Felder: Ist disabled oder readOnly gesetzt, wird das Feld nicht validiert. required hat dann keine Wirkung.
novalidate: Mit novalidate am Formular oder formnovalidate am Absende-Button findet keine Prüfung statt. Auch form.submit() umgeht die Validierung, form.requestSubmit() dagegen nicht.
Serverseitig trotzdem prüfen: Die Prüfung im Browser lässt sich leicht umgehen. Pflichtfelder müssen deshalb immer auch auf dem Server kontrolliert werden.
Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

HTMLInputElement.required HTMLTextAreaElement.validity HTMLTextAreaElement.setCustomValidity() HTMLTextAreaElement.checkValidity() HTMLTextAreaElement ElementInternals.ariaRequired