Formularvalidierungen gehören zum nervigen Allttagsgeschäft von Web-Entwicklern. Schließlich will alles was die Benutzer so in die Formulare tippen überprüft sein. Sicher ist sicher.
In den meisten Fällen geht dabei ein Roundtrip vonstatten, d.h. das Formular wird abgeschickt, der Server validiert die Eingaben (PHP, ASP, et cetera) und der Benutzer bekommt die gleiche Seite mit ein paar Anmerkungen der Unvollständigkeit oder Fehlerhaftigkeit wieder vor die Nase gesetzt, sofern nicht alles passt.
Timo Haberkern hat sich, unter Vorarbeit von Karl Seguin, des Themas angenommen und eine Javascript-Bibliothek namens
JSVAL entwickelt, die es ermöglicht die eingegeben Daten VOR dem abschicken zu validieren, um unnötigen Datenaustausch zu vermeiden.
Das Ganze basiert auf einer JS-Datei, die in alle Seite eingebunden werden muss, deren Formulare validiert werden sollen...
<script language="javascript" src="jsval.js"></script>
... und einigen Spezialattributen, mit denen die Formularfelder ausgezeichnet werden.
So muss einem Feld lediglich
required="1" hinzugefügt werden, um es zu einem Pflichtfeld zu machen. Für die Überprüfung von minimalen bzw. maximalen Werten genügen die beiden Attribute
minvalue="<Wert>" bzw.
maxvalue="<Wert>". Sollen zwei Felder, z.B. zur Eingabe und Bestätigung eines Passwortes miteinander verglichen werden, fügt man lediglich das Attribut
equals beiden Feldern hinzu.
Richtig interessant wird es allerdings erst beim Attribut
regexp. Es nimmt entweder definierte Konstanten auf wie z.B.
email, zur automatischen Validierung von eMail-Adressen, oder frei definierbare reguläre Audrücke entgegen! Gerade hiermit sind der Überprüfung von Eingabewerten kaum Grenzen gesetzt.
Das i-Tüpfelchen ist die Angabe von Javascript-Callback-Funktionen über das Attribut
callback. Damit lassen sich dann die restlichen offenen Überprüfungen z.B. über eine Datenbank erschlagen. AJAX und dem XMLHTTP-Objekt sei Dank.
Der eigentliche Aufruf von JSVAL kann schließlich gesammelt z.B. beim Klick auf die Senden-Schaltfläche geschehen, sofern man das
onSubmit-Attribut des Formulars bemüht:
<form name="reg" method="post" onSubmit="return validateStandard(this);">
Fein an JSVAL ist neben der reinen Validierung, wie ich finde, auch die Visualisierung von Eingabefehlern. Neben der Einblendung eines kleinen Icons, wird das Feld zudem gelb eingefärbt und rot umrandet. Damit merkt auch wirklich jeder Benutzer, daß an seinen Eingaben etwas nicht stimmen kann.
Einziges Manko sind die nicht W3C-konformen Attribute, die fast alle Entwickungsumgebungen anmeckern. Das Problem kann man allerdings umgehen, wenn man, wie vom Entwickler von JSVAL auch vorgeschlagen, die Attribute erst über das
onLoad-Event per Javascript an die Felder hängt.
Alles in allem ist die mit 10KB schlanke Bibliothek äußerst empfehlenswert.