Javascript

Formularvalidierung per Javascript-Bibliothek JSVAL

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.
kick it on dotnet-kicks.de AddThis 0 wikio-Stimme(n) Trackback-Url...

1 Kommentar bislang...

  • Ich baue auch gerade eine Formularüberprüfung, danke f. die Erklärung.
    Ulf
    1
    Ulf : Freitag, 26. Januar 2007 11:40

Dein Kommentar hierzu...


Kommentar-Feed für diesen Beitrag
Gravatare werden unterstützt .:. eMail-Adressen werden nicht veröffentlicht
 

RSS-Feed

Die URL des Standard-Newsfeed von zerbit.de lautet:

http://www.zerbit.de/rssfeed.aspx

Login


 

 

Statistik



kürzlich kommentiert

Beitrag 226

  • Datum: 06.01.2007
    Kategorie: Javascript
    Zugriffe: 2.330
    Kommentare: 1
    Trackbacks: 0

Letzte Beiträge

Kategorien

Buttons & More

Blog-Roll

Banner Piraten-Partei