Formular Validierung ist die Prüfung von Formulareingaben auf Vollständigkeit und Format, im Browser vor dem Absenden und auf dem Server danach. Sie entscheidet, ob eine Eingabe angenommen wird, und liefert bei einer Ablehnung den Text, der die Korrektur erklärt. Der Zeitpunkt der Prüfung wirkt dabei stärker auf das Erlebnis als ihre Strenge.
- Formular Validierung
Prüfung von Formulareingaben auf Vollständigkeit und Format, im Browser vor dem Absenden und auf dem Server danach.
Beispiel: „Die Formular Validierung meldete die fehlende Hausnummer erst nach dem Absenden, drei Schritte später.“Auch: Formularvalidierung oder Form Validation. Die Prüfung im Browser wird Client-Validierung genannt, die Prüfung nach dem Absenden Server-Validierung. Beide sind nötig, weil die erste für Bequemlichkeit sorgt und nur die zweite verbindlich ist.
Abgrenzung: Die Validierung prüft, was eingegeben wurde. Die Fehlervermeidung sorgt vorher dafür, dass bestimmte Eingaben gar nicht möglich sind.
Der Zeitpunkt entscheidet über den Eindruck
Drei Momente kommen in Frage. Eine Prüfung bei jedem Tastendruck färbt das E-Mail-Feld nach dem ersten Buchstaben rot und mahnt jemanden an, der gerade erst anfängt. Eine Prüfung beim Verlassen des Feldes trifft den Moment, in dem die Eingabe für den Nutzer abgeschlossen ist, und ist für Formatfragen unsere Empfehlung. Die Prüfung beim Absenden bleibt in jedem Fall nötig, weil nur sie Abhängigkeiten zwischen Feldern sehen kann, etwa eine Lieferadresse, die zum gewählten Versanddienst passen muss.
Eine Ausnahme gibt es: Steht erst einmal eine Meldung am Feld, darf sie während des Tippens wieder verschwinden, und zwar in dem Moment, in dem die Eingabe gültig wird. Ein Fehler, der noch angezeigt wird, obwohl er behoben ist, kostet Vertrauen.
Was HTML ohne JavaScript schon prüft
<label for="mail">E-Mail-Adresse</label>
<input type="email" id="mail" name="mail"
autocomplete="email" required
aria-describedby="mail-hinweis">
<p id="mail-hinweis">An diese Adresse geht die Bestellbestätigung.</p>
<label for="plz">Postleitzahl</label>
<input type="text" id="plz" name="plz"
inputmode="numeric" autocomplete="postal-code"
pattern="[0-9]{4,5}" required>Der Feldtyp email und das Attribut pattern speisen die eingebaute Prüfung des Browsers, required blockiert das Absenden bei leerem Feld, und inputmode holt auf dem Telefon die Zifferntastatur, ohne das Feld zu einem Zahlenfeld zu machen. Das Attribut autocomplete gibt dem Browser und dem Passwortmanager den Zweck des Feldes mit und erfüllt damit das Erfolgskriterium 1.3.5 Identify Input Purpose der WCAG 2.2 auf Stufe AA.
Die Ausgabe gehört zur Prüfung
Die Standardmeldungen des Browsers erscheinen als kleine Sprechblase, verschwinden beim nächsten Klick und lassen sich im Wortlaut kaum steuern. Wer die Texte selbst formulieren will, schaltet die Browserprüfung über novalidate ab und übernimmt die Ausgabe. Dabei gilt das Erfolgskriterium 3.3.3 Error Suggestion der WCAG 2.2 auf Stufe AA: Ist eine Korrektur bekannt, wird sie vorgeschlagen. Nach dem Absenden gehört der Fokus auf das erste fehlerhafte Feld, damit auch jemand ohne Maus dort landet, wo die Arbeit wartet.