- Formulardaten validieren - so einfach geht es › Webstandard-Blog

Formulardaten validieren - so einfach geht es

JavaScript - 22 Dez, 2008

Twittern
Kommentare (7)

Welche Grundlagen der Gestaltung von Formularen es gibt, sind bekannt. Wie die innerhalb eines Formulars abzufragenden Daten validiert werden und welche Möglichkeiten hierbei die zahlreichen JavaScript-Frameworks bieten, ist Ziel des heutigen Beitrages. Eines ist bei bzw. nach der Validierung von Formulardaten unabdingbar. Fehlermeldungen müssen sich klar vom übrigen Layout absetzen, damit ihrer Bedeutung Rechnung getragen werden kann. Eine zu dezente oder fehlende Kennzeichnung von Formularelementen führt eher zur Verunsicherung seitens des Users, als ihm oder ihr dabei behilflich zu sein das entsprechende Formularfeld zu finden. Die folgende Liste von Validierung-Plugins basierend auf jQuery, Mootools oder Prototype, ermöglichen Ansätze Formulardaten ( neben einer serverseitigen Validierung ) validieren zu können.

jQuery

Mootools

Prototype

Livevalidation ( standalone )

Die Möglichkeiten der Gestaltung von Formularen, sowie den dazugehörigen Fehlermeldungen sind vielfältig. Wer mehr über Tipps und Tricks im Umgang mit Formularen und der Gestaltung dieser via CSS erfahren möchte, wird im Buch "CSS-Design. Die Tutorials für Einsteiger" fündig. Wer zudem weitere interessante Anwendungsbeispiele zur Validierung von Formulardaten basierend auf JavaScript-Frameworks kennt und sie mit anderen teilen möchte, ist hiermit dazu aufgerufen den entsprechenden Link im Kommentarbereich zu kommunizieren.

Ähnliche Artikel zu diesem Thema:

masone
22 Dez 2008, 12:13

Das hört sich jetzt fast so an als würde die einfache clientseitige Validierung der Formulardaten alle Probleme lösen...

Trotzdem danke für die Links :)
Webstandard-Team
22 Dez 2008, 12:41

@masone: Natürlich lösen diese Validierungsansätze nicht sämtliche Probleme, dass sollen sie auch gar nicht. Aber sie nehmen dem ein oder anderen vielleicht den zu großen Respekt vor der Validierung von Daten durch JavaScript. Denn sie können relativ unkompliziert eingesetzt werden und das ohne der große "JavaScript-Experte" sein zu müssen.
Fresh 22 Dez 2008, 15:17

Ich hab mir die Beispiele nicht im Detail angesehen, aber die einzige "brauchbare" Lösung ist entweder die Validierung mit Ajax, da selbst bei deaktiviertem JavaScript noch PHP greift.
Connie
22 Dez 2008, 18:58

ich experimentiere gerade mit Livevalidation und das klappt sehr gut.
Es sollte aber trotzdem immer noch eine serverseitige Validierung stattfinden, falls Javascript mal de-aktiviert ist
das ist es wohl auch, was Fresh in seinem nicht vollständigen Satz meinte, vermute ich

ich hab so meine Probleme mit diesen ganzen Javascript-Frameworks, da ich bis jetzt noch keines gefunden habe, das mit Sprachdateien arbeitet und das immer ein Gefummel im Source-Code verlangt und auch keine mehrsprachigen Inhalte ermöglicht

die Javasscript-Entwickler haben wohl auch nicht erkannt, daß die Welt mehr als eine Sprache spricht...

Und in diesem Blog hier vermisse ich den "Readmore"-Link, das ist schwierig, man denkt, der Artikel sei zu Ende und vermisst den Inhalt...

Nichtsdestotrotz wünsche ich valide Tage!

Connie
Ralle
23 Dez 2008, 08:40

Meiner Meinung nach muss man zwingend beide Validierungsmehoden einsetzen, sowohl Serverseitig als auch mit JavaScript. Wichtig ist meiner Meinung nach auch das die Fehlermeldungen für den User sichtbar sind (klingt albern ich weiß ;-)) Aber allzuoft stößt man auf lange Formulare und die Fehlermeldung wird überhalb des Formulars angezeigt und liegt damit ausserhalb des sichtbaren Bereichs, so dass man erst durch Scrollen mitbekommt das überhaupt ein Fehler vorliegt. der Platz für javaScript Fehlermeldungen ist imho direkt unter dem Submit Button, oder als Javascript Alert. Es ist auch eine gute Idee den Submit Button nach dem Absenden zu deaktivieren und die Beschriftung zu ändern, z.b. nach "Sende Daten...".

Ich nutze seit geraumer Prototype und kann es nur wärmstens weiterempfehlen. Nicht zuletzt weil die Einbindung dank Google Hosting so einfach ist und mit ein wenig Glück hat der die User die Library schon im Cache.
Felix Nagel
23 Dez 2008, 12:15

Leider nicht mal ein Hinweis auf die WAI (aria) Guidelines was Formulare und Livevalidierung angeht.
Schade...
Ben 22 Mai 2009, 17:41

Naja man sollte bei der Idee der JavaScript validieren nicht vergessen, das es sich größtenteils um Usability Effekte handelt. Es geht nicht hauptsätzlich darum dem Betreiber bessere oder pur valide Datensätze zu liefern, sondern soll dem Benutzer eine on the fly Hilfe sein, Formulare besser auszufüllen. Natürlich oder gerade deshalb, weil viele JavaScript deaktiviert haben, wobei "viele" relativ ist, sollte eine Serverseitige validierung ebenfalls stattfinden.

Schaut man sich große Portale an, dann findet man bei den meisten den Einsatz beider Methoden, aus gutem Grund. Es kann durchaus nervig sein, schickt man ein Formular ab und erhält anschließend erst eine Fehlermeldung, da hab ich das lieber gleich angezeigt, sollten sich Fehler im Datensatz befinden.

Web2.0 bzw. die Frameworks, das ist allein schon eine Verständnisfrage, werden all zu oft falsch eingesetzt. Es geht weder um "bling bling", noch um einen Ersatz "herkömlicher" Methoden, die Frameworks sollten die Usability verbessern und genau das macht eine Live-validation.

Btw. ist das die Schlimmste Captcha Methode die ich kenne, ich hab jetzt geschlagene 4mal gebraucht bis keine Fehlermeldung auf eine "angeblich" falsch übertragene Nummer kam.