Was ist Inline-Validierung?
Inline-Validierung heißt: Das Formular prüft jedes Feld für sich und sagt dir sofort, ob die Eingabe passt. Vergessene Ziffer in der Postleitzahl? Der Hinweis erscheint direkt am Feld, nicht erst nach dem Absenden auf einer neu geladenen Seite.
Der UX-Experte Luke Wroblewski unterschied 2009 drei Zeitpunkte: nach der Eingabe, also beim Verlassen des Feldes, während des Tippens und schon vor der Eingabe. Die Nielsen Norman Group empfiehlt den Hinweis, sobald jemand ein Feld fertig ausgefüllt hat.
Wichtig: Inline-Validierung ist Komfort im Browser. Sie ersetzt nie die Prüfung auf dem Server, die aus Sicherheitsgründen immer dazugehört.
Was die bekannteste Studie zeigt
Wroblewski testete 2009 mit der Londoner Usability-Firma Etre sechs Varianten eines Registrierungsformulars an 22 Personen. Die beste Inline-Variante prüfte nach dem Verlassen des Feldes und schlug das Formular, das erst beim Absenden prüfte, deutlich.
Beispiel A
Mehr Erfolg
+22 %
Erfolgsrate
−22 %
Fehler
Mehr Leute kamen durch, und es passierten weniger Fehler.
Beispiel B
Weniger Aufwand
−42 %
Bearbeitungszeit
+31 %
Zufriedenheit
Die Leute waren schneller fertig und zufriedener.
Die Prüfung schon vor der Eingabe schnitt dagegen am schlechtesten ab: höchste Fehlerrate, geringste Zufriedenheit. Und wer beim Tippen in offenen Feldern geprüft wurde, tippte ein Zeichen, wartete auf die Meldung, tippte das nächste.
Beim Verlassen oder beim Absenden?
Das Baymard Institute, das Onlineshops auf Usability untersucht, fand 2024 bei 31 Prozent der Websites gar keine Inline-Validierung. Baymard empfiehlt, beim Verlassen des Feldes zu prüfen oder sobald die erwartete Länge erreicht ist, etwa bei Postleitzahl oder Kartennummer. Eine Fehlermeldung soll verschwinden, sobald der Fehler korrigiert ist.
Es gibt eine ernst zu nehmende Gegenposition. Das Design-System der britischen Regierung, GOV.UK, prüft bewusst erst beim Absenden: Langsam Tippende würden unterbrochen, und Screenreader könnten Meldungen beim Feldwechsel schlecht ansagen. Dann gehören alle Fehler oben in eine Zusammenfassung und zusätzlich ans jeweilige Feld.
Ein guter Mittelweg heißt „Reward early, punish late“: Ist ein Feld rot, prüfst du beim Korrigieren sofort neu, damit der Fehler schnell verschwindet. Ein neues Feld prüfst du erst, wenn jemand es verlässt.
Häufige Fehler
Fehler 1 · Zu früh meckern
Das E-Mail-Feld wird rot, sobald du das erste Zeichen tippst. Das fühlt sich an wie ein Lehrer, der dir über die Schulter schaut. Prüf erst, wenn die Eingabe fertig ist.
Fehler 2 · Nur Farbe als Signal
Ein roter Rahmen allein reicht nicht. Die WCAG, der Standard für barrierefreie Websites, verlangen, dass ein erkannter Fehler in Textform beschrieben wird. Farbe darf nicht das einzige Mittel sein. Kombinier Farbe, Symbol und Text.
Fehler 3 · Meldung ohne Lösung
„Ungültige Eingabe“ hilft niemandem. Schreib, was fehlt: „Die Postleitzahl hat fünf Ziffern.“ Wenn ein Korrekturvorschlag bekannt ist, verlangen die WCAG sogar, dass du ihn zeigst. Gute Fehlermeldungen sind Microcopy und verdienen genauso viel Sorgfalt wie deine Überschriften.
So setzt du Inline-Validierung richtig ein
- Beim Verlassen prüfen: Für die meisten Felder der richtige Moment.
- Beim Tippen nur bei klaren Regeln: Passwortregeln oder ein vergebener Benutzername dürfen live erscheinen.
- Fehler live entfernen: Sobald korrigiert, verschwindet die Meldung.
- Haken mit Bedacht: Bei einem Namensfeld fragt sich jeder, was ein grüner Haken bedeuten soll. Bestätigung lohnt sich vor allem bei Feldern mit echten Regeln.
- Server prüft immer mit: Die Browser-Prüfung lässt sich umgehen.
Häufige Fragen
Wann sollte ein Formular eine Eingabe prüfen?
Meist, wenn jemand das Feld verlässt. Beim Tippen nur bei klaren Regeln wie Passwortvorgaben. Fehler sollten beim Korrigieren sofort verschwinden.
Bringt Inline-Validierung mehr Abschlüsse?
In einer viel zitierten Studie von 2009 stieg die Erfolgsrate um 22 Prozent. Die Stichprobe war klein, die Richtung bestätigen aber auch spätere Usability-Tests.
Brauche ich trotzdem eine Prüfung auf dem Server?
Ja, immer. Die Prüfung im Browser ist Komfort und lässt sich umgehen. Sicherheit gibt es nur auf dem Server.
Reicht ein roter Rahmen als Fehlerhinweis?
Nein. Nach den WCAG muss ein Fehler auch in Textform beschrieben sein, Farbe allein ist nicht barrierefrei.
Warum prüfen manche Formulare erst beim Absenden?
Aus Gründen der Barrierefreiheit. Das britische Regierungs-Design-System will langsam Tippende nicht unterbrechen und Fehler zuverlässig für Screenreader ansagen.
