ArticleDesign von Validierungsnachrichten

Die clientseitige Validierung von HTML-Formularen gehört zu den Standardaufgaben bei der Entwicklung einer Webapplikation. Doch wie gibt man Validierungsnachrichten, wie “Dies ist ein Pflichtfeld” oder “Der Name wird bereits verwendet” aus.

1.Möglichkeit

Die erste Möglichkeit ist es, rechts neben den Eingabefeldern Platz frei zu halten, um dort die Validierungsnachrichten anzuzeigen.

Der große Nachteil dieser Lösung liegt darin, dass man Platz frei halten muss. Es entsteht ein Freiraum, der das Layout ziemlich einschränkt.

2.Möglichkeit

Die zweite Möglichkeit ist es, alle Nachrichten oberhalb des Formulars darzustellen.

Diese Lösung hat zwei Nachteile. Zum einen kann man nicht erkennen, welche Nachricht zu welchem Eingabefeld gehört und zum anderen rutscht das Formular nach der Validierung nach unten.

3.Möglichkeit

Eine weitere Möglichkeit wäre die Anzeige unterhalb der einzelnen Eingabefelder. Hier würde man entweder wieder Platz frei halten müssen oder das Formular rutscht wieder nach unten.

Damit das Formular nicht rutscht oder man unnötig Platz verschenkt, gibt es eigentlich nur die Lösung, die Nachrichten wie Tooltips darzustellen. D.h. sie befinden sich nicht im normalen Layout, sondern werden einfach darüber gelegt.

Dieses Beispiel habe ich auf GitHub hinterlegt. Für die Implementierung der Validierung habe ich JQuery-Validate verwendet und für die Platzierung habe ich eine Methode einem Eintrag auf Stackoverflow entnommen und das CSS stammt aus dem Projekt jQuery.validationEngine.

Zum Ausprobieren einfach das Projekt herunterladen, die index.html im Browser öffnen und das Formular absenden.

Keywords