jQuery Formulare validieren – Ein Überblick

Wie im vorigen Post angekündigt starten wir heute mit unserer Post-Reihe “Formulare mit jQuery – Die umfassende Serie“.

Heute wollen wir mit Teil 1 – “Übersicht über aktuelle Form-Validaton Scripts” beginnen.
Da es zahlreiche dieser Scripts gibt, und diese sich Teilweise nur minimal voneinander unterscheiden da sie meist auf dem bassistance-Plugin von Jörn Zaefferer basieren, werden wir versuchen euch hier nur die vorzustellen welche besonders im Bezug auf Funktionalität, Größe oder Einfachheit der Implementierung sind.



bassistance – jQuery plugin: Validation

Beim validation Plugin von bassistance kann man wohl vom offiziellen validation Plugin von jQuery sprechen. Dieses Plugin lässt nahezu keine Wünsche offen.
Das Plugin ist, für die vielzahl an Möglichkeiten die es bietet, mit nur 24KB in der minified-Version nicht sonderlich groß. Es ist ab jQuery 1.2.6+ verfügbar und kompatibel mit Version 1.3.2.

Es bietet alle nur erdenklichen Arten der Formular Überprüfung.

  • Validierung on the fly (beim Wechsel in das nächste Feld), validieren auf submit, validieren von Textfeldern, Textareas, radiobuttons und checkboxen.
  • Es besteht z.B. auch die Möglichkeit diese in Abhängigkeit voneinander zu prüfen. Bei einer Gruppe von checkboxen kann z.b. geprüft werden wieviele ausgewählt sein müssen usw.
  • Auch das prüfen von Selects und multiple-Selects ist ohne weiteres möglich.
  • Eingaben können auf Länge, Typ (E-Mail, Number, String…), Anzahl der gewählten Elemente usw. validiert werden.
  • Die Ausgabe der Error-Messages ist sehr flexibel gehalten. So können diese direkt am entsprechenden Formular-Element oder gesammelt, z.B. in einem div, ausgegeben werden. Ändert der User eine fehlerhafte Eingabe reagiert die Validierung und ändert die Error-Messages on the fly.
  • Mit dem Plugin können richtig ausgefüllte Formulare, auf submit, auch direkt per AJAX verarbeitet werden.

Das einbinden des Scripts ist auch denkbar einfach.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$().ready(function() {
	$("#FormularID").validate({
		rules: {
			firstname: "required",
			lastname: "required",
			username: {
				required: true,
				minlength: 2
			},
			password: {
				required: true,
				minlength: 5
			},
			confirm_password: {
				required: true,
				minlength: 5,
				equalTo: "#password"
			}
	});
});

Nun müsst ihr nur noch euren Formular-Elementen die entsprechende ID geben.

Eine Vielzahl von Demos und die Dateien zum Download findet ihr auf der offiziellen Website.



jVal – jQuery Form Field Validation Plugin

Bei jVal handelt sich um eines der etwas schöneren Validation-Plugins.
Das Plugin funktioniert mit der aktuellen jQuery-Version 1.3.1 und hat nur 5.3KB.
Die Grundfunktionen des Plugins kurz im Überblick:

  • Validieren von Inhalten innerhalb eines bestimmten Containers, basierend auf den Attributen des Input-Tags.
  • Einfache Konfiguration der Validierungsmöglichkeiten.
  • Validierung aller Formular-Felder innerhalb eines Containers mit einem einzigen Funktionsaufrufs.
  • Validierung einzelner Formular-Felder wenn der User das Feld verlässt.
  • Verhindern der Eingabe von speziellen Zeichen in ein Feld mit Meldung an den User das dies nicht erlaubt ist.

Das besondere an diesem Plugin ist wohl die animierte Ausgabe der Fehlermeldungen. Diese sliden mit einem Blur vom Feldende aus ein.

jVal

Für das Plugin werden neben der jVal.js und der jquery.js noch ein jVal.css sowie jquery.corner.js von Dave Methvin benötigt. Mittels des sehr übersichtlichen css-Files lässt sich das Aussehen der Error-Messages ohne Probleme anpassen.

Das implementieren des Plugins ist, wie ich finde, nicht ganz optimal gelöst. Hat man sich jedoch erst einmal damit vertraut gemacht geht es doch reicht einfach von der Hand.
Die übergabe der Parameter findet, im Gegensatz zu den meisten anderen Plugins, nicht zentral statt sondern muss jedem Formular-Element mitgegeben werden.

1
<input id="f1" size="20" type="text" />


jQuery AlphaNumeric

AlphaNumeric von Paulo Marinas ist ein validation-Plugin welches sich speziell der Begrenzung der Eingabe widmet. AlphaNumeric baut auf dem Numeric Plugin von Sam Collet auf, welches nur die Eingabe von Zahlen und Punkten erlaubt.
Mit AlphaNumeric habt ihr die Möglichkeit die Eingaben in Formularfelder so zu Filtern das nur bestimmte Typen eingegeben werden können.
Die Grundfunktionen des Plugins kurz im Überblick:

  • Begrenzung der Eingabe ausschließlich auf Buchstaben
  • Begrenzung der Eingabe ausschließelich auf Zahlen
  • Begrenzung der Eingabe auf Zahlen und Buchstaben (keine Satz oder Sonderzeichen)
  • Erstellen eigener Regeln für die Eingabe

Ein sehr nützliches Plugin wenn man die volle Kontrolle über seine Felder haben will.
Ein einfaches Beispiel für die Implementierung:

?View Code JAVASCRIPT
1
2
$('.klasse1').alphanumeric();
$('.klasse2').alphanumeric({allow:"., "});

dann müsst Ihr nur noch euren Textfelder die entsprechende Klasse zuweisen und das war es schon.

1
2
<input class="klasse1 tb" size="10" type="text" />
<input class="klasse2 tb" size="10" type="text" />

Alle Dateien zum Download sowie Demos findet ihr auf der offiziellen Website.



Form Validator

Der Form Validator von Jeremy Fry überzeugt aufgrund seiner Schlicht- und Schönheit. Zudem ist er extrem einfach zu implementieren. Das Plugin hat nur 5KB und läuft mit jQuery 1.3.2

Formularfelder werden on the fly validiert und werden, je nach Eingabe, “grün” oder “rot” umrahmt.
Zusätzlich kann man direkt angeben welche php-Datei zur Verarbeitung aufgrufen werden soll.
Sind alle Eingaben valide und klickt man auf Submit, so fadet das Formular aus und verarbeitet die Eingaben via AJAX und gibt das Ergebniss zurück.
Speziell validiert werden können E-Mailadressen, Telefonnummern, Postleitzahlen, Namen und Datumseingaben.
Das zugehörige CSS ist sehr übersichtlich und kann problemlos angepasst werden.

formvalidator

Ein einfaches Beispiel für die Implementierung:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
$(document).ready(function ()
{
	$('#myform').FormValidate({
		phpFile:"send.php",
		ajax:true,
		validCheck: false
	});
});

Anschließend nur noch euren Textfeldern die entsprechnden Klassen zuweisen.

1
2
<input id="form_name" class="is_required" name="Name" type="text" />
<input id="form_email" class="vemail" name="Email" type="text" />

Eine Demo sowie alle Dateien zum Download findet Ihr auf der offiziellen Website.


Sicher könnte man diese Liste um etliche andere Plugins erweitern. Allerdings solltet Ihr mit den oben vorgestellten Plugins so ziemlich alle Anforderungen die man an eine Formular-Validierung haben kann abdecken können. Es gibt noch ein paar weitere Plugins die ab und an nützlich sein können, die euch hier aber nur kurz in einer Linkliste an die Hand geben möchte.

Der Vollständigkeit wegen sollt hier auch noch das Form Plugin von Malsup erwähnt werden, welches sicher eines der, wenn nicht dass, umfangreichsten Formular Plugins für jQuery ist. Welches unteranderem auch validierungs Möglichkeiten bietet. Dieses Plugin werden wir euch in Teil 4 “Übersicht über aktuelle jQuery-Plugins zum verarbeiten von Formulardaten per AJAX” näher vorstellen werden.

Sollte der ein oder andere von euch der Meinung sein wir hätten ein wirklich relevantes Plugin vergessen freuen wir uns immer über Kommentare oder eine E-Mail.



Randnotiz

Auch wenn es in diesem Post eigentlich um Formulare mit jQuery geht möchte ich euch noch kurz ein validation-Script für MooTools vorstellen.
MooTools.Floor FormCheck. Dieses Plugin ist meiner Meinung nach eines der schönsten validierungs-Plugins die es moment gibt und ist unsere erste Wahl bei Projekten in denen wir MooTools nutzen.

MooTools.Floor FormCheck

Das Plugin beherrscht alle gänigen validierungs-Formen hat aber ein paar schöne Besonderheiten.
So erscheinen die Fehlermeldungen schön in Form von Tooltips am Formularelement.
Ausserdem slided das Plugin, auf Submit, die Seite an die Stelle an welcher der Fehler angezeigt wird.
Das ganze könnt ihr euch in dieser Demo anschauen.


Ich hoffe euch mit diesem Post einen ersten Überblick über Formular Validierung verschafft zu haben.

Verpasst nicht die Folgeteile dieser Serie und aboniert unser RSS-Feed.


Formulare mit jQuery – die umfassende Serie:


http://www.mysrc.de/wp-content/plugins/sociofluid/images/twitter_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/google_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/stumbleupon_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/delicious_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/digg_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/reddit_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/dzone_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/blinklist_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/blogmarks_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/furl_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/newsvine_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/technorati_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/magnolia_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/myspace_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/facebook_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/yahoobuzz_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/sphinn_48.png

Ähnliche Artikel

7 Responses to “jQuery Formulare validieren – Ein Überblick”

  1. Roots  on Januar 19th, 2011

    Eine weitere sehr schöne Lösung bietet Cedric Dugas unter:
    http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

    Einfache Implementierung und meiner Meinung nach sehr einfache und übersichtliche Möglichkeit Deutsche Fehlermeldungen einzupflegen.

  2. Werner  on März 17th, 2011

    Solide Sammlung,

    nachstehendes Validations.Script sollte aber nicht fehlen, absolut cool.

    http://www.1stwebdesigner.com/tutorials/building-real-time-form-validation-using-jquery/

  3. sadas  on Oktober 4th, 2011

    asdas

  4. Smithb312  on April 15th, 2014

    That is some inspirational stuff. Never knew that opinions could be this varied. Be certain to keep writing. cekadgfgbg


Kommentare