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: ValidationBeim 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.
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.
ganzen Artikel lesen
Ich möchte euch noch kurz ein schönes weiteres Plugin zum Layouten mit an die Hand geben. 
Letzte Kommentare