JavaScript

Auf Formularereignisse reagieren

Mit JavaScript können Sie unter anderem auf Nutzerinteraktionen in Ihrem Formular reagieren, zusätzliche Formularfelder anzeigen und ein Formular einreichen.

Nutzern beim Ausfüllen zusätzlicher Formularsteuerelemente helfen

Angenommen, Sie haben ein Umfrageformular erstellt. Nachdem ein Nutzer eine Option ausgewählt hat, möchten Sie eine zusätzliche <input> anzeigen, um eine bestimmte Frage zur Auswahl zu stellen. Wie können Sie nur das relevante <input>-Element anzeigen?

Mit JavaScript können Sie eine <input> nur anzeigen lassen, wenn die zugehörige <input type="radio"> gerade ausgewählt ist.

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

Sehen wir uns den JavaScript-Code für die Demo an. Sind Ihnen die Attribute aria-controls und aria-expanded aufgefallen? Verwenden Sie diese ARIA-Attribute, damit Nutzer von Screenreadern erkennen können, wann ein zusätzliches Formularkontrollelement angezeigt oder ausgeblendet wird.

Sorgen Sie dafür, dass Nutzer ein Formular einreichen können, ohne die Seite zu verlassen.

Angenommen, Sie haben ein Kommentarfeld. Wenn ein Leser einen Kommentar hinzufügt und das Formular sendet, sollte er den Kommentar idealerweise sofort sehen, ohne dass die Seite aktualisiert werden muss.

Dazu musst du das Ereignis onsubmit überwachen, dann mit event.preventDefault() das Standardverhalten verhindern und die FormData über die Fetch API senden.

Ihr Backend-Script kann prüfen, ob eine POST-Anfrage aus dem Browser stammt (action-Attribut eines Formularelements, wobei method="post") oder aus JavaScript, z. B. eine fetch()-Anfrage.

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

Informieren Sie Screenreader-Nutzer immer über Änderungen an dynamischen Inhalten. Fügen Sie Ihrem HTML-Code ein Element mit dem Attribut aria-live="polite" hinzu und aktualisieren Sie den Inhalt des Elements nach einer Änderung. Sie können den Text beispielsweise in „Ihr Kommentar wurde veröffentlicht“ ändern, nachdem ein Nutzer einen Kommentar gepostet hat.

Weitere Informationen zu ARIA-Live-Regionen

Validierung mit JavaScript

Achten Sie darauf, dass Fehlermeldungen zum Stil und Ton Ihrer Website passen.

Die Formulierung der Standardfehlermeldungen unterscheidet sich je nach Browser. Wie können Sie dafür sorgen, dass allen Nutzern dieselbe Mitteilung angezeigt wird und dass sie zum Stil und Ton Ihrer Website passt? Verwenden Sie die Methode setCustomValidity() der Constraint Validation API, um eigene Fehlermeldungen zu definieren.

Nutzer in Echtzeit über Fehler informieren

Mit den integrierten HTML-Funktionen für die Formularvalidierung können Sie Nutzer über ungültige Formularfelder informieren, bevor die Daten an Ihr Backend gesendet werden. Wäre es nicht toll, wenn Nutzer benachrichtigt werden, sobald sie ein Formularfeld verlassen?

Hören Sie auf das Ereignis blur, das ausgelöst wird, wenn ein Element den Fokus verliert, und verwenden Sie die Benutzeroberfläche ValidityState, um festzustellen, ob ein Formularkontrollelement ungültig ist.

Achten Sie darauf, dass Nutzer das von ihnen eingegebene Passwort sehen können.

Der für <input type="password"> eingegebene Text wird standardmäßig ausgeblendet, um den Datenschutz der Nutzer zu wahren. Helfen Sie Nutzern bei der Eingabe ihres Passworts, indem Sie ein <button> anzeigen, mit dem sich die Sichtbarkeit des eingegebenen Texts umschalten lässt.

Demo ausprobieren Mit der Option Passwort anzeigen <button> können Sie die Sichtbarkeit des eingegebenen Texts ein- und ausschalten. So funktioniert's Wenn Sie auf Passwort anzeigen klicken, ändert sich das type-Attribut des Passwortfelds von type="password" in type="text" und der Text <button> in „Passwort ausblenden“.

Die Schaltfläche Passwort anzeigen muss barrierefrei sein. Verbinden Sie die <button> mit der <input type="password"> über das Attribut aria-controls.

Wenn Sie Nutzer von Screenreadern darüber informieren möchten, ob das Passwort derzeit angezeigt oder ausgeblendet ist, verwenden Sie ein ausgeblendetes Element mit aria-live="polite" und ändern Sie den Text entsprechend. Nutzer von Screenreadern müssen wissen, wann ein Passwort angezeigt wird und für andere Personen auf dem Bildschirm sichtbar ist.

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

Weitere Informationen zum Implementieren einer Option zum Anzeigen des Passworts

Ressourcen

• FormData
• Constraint Validation API
• <input type="password">