JQuery Kochbuch (German Edition)
vergessen! Bitte? Er hat sie doch ausgefüllt, muss das jetzt aber wiederholen.
Solche verzögerte Rückmeldungen können sehr frustrierend sein und die ansonsten gute Oberfläche ruinieren, insbesondere, wenn Sicherheitsbedenken die Funktionalität einschränken – was hier zu den leeren Passwort- und Captcha-Feldern führt.
Lösung
Eine Möglichkeit, die Situation zu verbessern, ist das Hinzufügen einer Überprüfung schon auf dem Client.Die grundlegende Idee ist dabei die, dem Anwender so schnell wie möglich Rückmeldung zu geben, ohne ihn zu nerven. Es sollte nicht möglich sein, eine ungültige Form abzuschicken. Dadurch wird vermieden, Passwörter oder Captchas wiederholt eingeben zu müssen.
Es ist zudem sinnvoll, Felder nach dem Ausfüllen hervorzuheben, die fehlerhaft sind, wie zum Beispiel bei ungültigen E-Mail-Adressen wie john.doe@gmail,com . Dies ist allerdings nicht sehr hilfreich, wenn es schon passiert, bevor der Anwender überhaupt die Chance hatte, ein Feld korrekt auszufüllen. Gibt man »zu kurz« für ein mindestens zwei Zeichen langes Feld aus, nachdem der Anwender gerade erst das erste Zeichen eingetippt hat, ist das nur nervig.
Ein Plugin, das diese Anforderungen abdeckt, ist das Validation-Plugin .
Laden Sie zunächst einmal das Plugin herunter, entpacken Sie die Dateien und kopieren Sie
jquery.validate.js
in Ihr Projekt. Das folgende Beispiel zeigt eine Form zum Kommentieren – mit Feldern für den Namen, die E-Mail-Adresse, eine URL und den eigentlichen Kommentar. Ein Aufruf der Plugin-Methode
validate()
sorgt für eine Überprüfung der Form. Die dabei berücksichtigten Regeln werden mit Klassen und Attributen innerhalb der Tags definiert:
Jedes Feld mit der Klasse
required
wird daraufhin überprüft, ob es etwas enthält. Andere Methoden in diesem Beispiel enthalten Folgendes:
email
Prüft, ob das Feld eine gültige E-Mail-Adresse enthält.
url
Prüft, ob das Feld eine gültige URL enthält.
minlength
Prüft, ob das Feld mindestens x Zeichen enthält, wobei x über ein Attribut definiert wird:
minlength="2"
Diskussion
Das Validation-Plugin kümmert sich vor allem um einen speziellen Ansatz der Validierung auf Client-Seite – so viel Arbeit wie möglich im Browser erledigen und den Server nur in besonderen Fällen, die durch die remote-Methode abgedeckt werden, zur Hilfe heranziehen, zum Beispiel zum Prüfen, ob ein Benutzername immer noch verfügbar ist.
Ein anderer Ansatz wäre es, ein Verdoppeln der Validierungsregeln und -methoden zu vermeiden und anstattdessen die gesamte Form per Ajax an der Server zu schicken – normalerweise beim Abschicken der Form. Dann könnte auf Server-Seite die schon vorhandene Logik genutzt werden. Allerdings ist die Rückmeldung an den Anwender dadurch langsamer, da man nicht bei jedem Tastendruck eine Anfrage schicken sollte. Zudem ist es recht unwahrscheinlich, dass der Server-Code zum Überprüfen der Daten schon mit Ajax im Hinterkopf geschrieben wurde, wodurch der Aufwand für die Wiederverwendung größer sein kann. In diesem Fall müssten Sie Ihre Planung von vornherein entsprechend ausrichten.
Das Validation-Plugin kann einer Form auch später
Weitere Kostenlose Bücher