Ajax Lightform
Formcheck ausreizen
- Einfaches Formulardesign mit Ajax
- Das Grundgerüst
- Formcheck ausreizen
Bis jetzt haben Sie nur einen Bruchteil dessen gesehen, was Formcheck leisten kann. Sie können damit Felder auf verschiedene Inhalte, Längen und Gültigkeiten prüfen. In den folgenden Beispielen haben wir weitere Überprüfungen für Sie zusammengestellt, die Sie an der einen oder anderen Stelle sicherlich sinnvoll verwenden können.Die Überprüfung eines Feldes findet immer über die Klasse des Feldes und die Funktion validate() statt. Formcheck unterstützt die Feldtypen input, textarea und select.Die einfachste Form ist die Festlegung, dass es sich bei der Eingabe um ein Pflichtfeld handelt. Dies geschieht über den Parameter required. Sollten Sie im Feld keine Eingabe getätigt haben, wird die Fehlermeldung vom Typ required ausgegeben. Den genauen Wortlaut legen Sie über die Sprachdatei fest.
<input class="validate['required']" />
Neben der reinen Prüfung auf Existenz können Sie auch die Inhalte und deren Aufbau als solches überprüfen. Es stehen Ihnen in der in Lightform verwendeten Version 1.2 zahlreichen Überprüfungen zur Verfügung. Eine komplette Übersicht finden Sie direkt in der Kurzdokumentation innerhalb der Datei formcheck.js.Soll das Feld nur Buchstaben enthalten, geben Sie den Parameter alpha mit, sind alphanumerische Inhalte erlaubt, entsprechend alphanum.
<input class="validate['required',
'alphanum']" />
Im Beispiel für die Prüfung des Namens sehen Sie, wie eine Prüfung auf mehrere Argumente in einer Abfrage möglich ist. Sie reihen die einzelnen Parameter durch Komma getrennt aneinander.
<input class="validate['required',
'length[3,-1]','nodigit']" />
Es sind im Feld Eingaben erlaubt, die keine Ziffern enthalten sowie mindestens drei Zeichen lang sind. Eine Obergrenze wurde nicht gesetzt - durch den zweiten Parameter -1 ist eine beliebig lange Eingabe möglich.Mithilfe der implementierten Funktion confirm() lässt sich einfach die Überprüfung einer gleichen Eingabe zweier Felder durchführen. Das erste Feld wird dabei wie gewohnt definiert und als Pflichtfeld deklariert.
<input type="text" class="validate
['required']" name="password" id=
"password" />
Das zweite Feld referenziert über die ID auf das Eingabefeld des Passworts und überprüft mithilfe der Funktion confirm(), ob es sich um die gleiche Eingabe handelt.
<input type="text" class="validate
['confirm[password]']" name="confirm" />
Sollten Unterschiede vorliegen, wird die Fehlermeldung confirm ausgegeben.Sie können Formcheck natürlich auch außerhalb von Lightform nutzen. Voraussetzung dafür sind lediglich folgende Elemente aus den Mootools-Bibliotheken: Aus der Core-Sammlung benötigen Sie
- von Core, Native, FX und Element: alle Komponenten
- von Utilities: alle Komponenten außer JSON und Swift
- von Request: Request
<script type="text/javascript" src="/
js/mootools/core.js"></script><script type="text/javascript" src="/
js/mootools/more.js"></script>
Anschließend benötigen Sie, noch die spezifischen Dateien von Formcheck:
<script type="text/javascript" src="/
js/formcheck/lang/en.js"></script><script type="text/javascript" src="/
js/formcheck/formcheck.js"></script>
Damit die Überprüfungen auch stattfinden können, müssen Sie Ihr Formular mit einer Instanz von Formcheck verknüpfen. Dazu verwenden Sie die Funktion Formcheck() und geben dieser als Mindestanforderung die ID Ihres Formulars als Parameter mit.
Weitere optionale Parameter und deren Bedeutung finden Sie direkt in der Datei formcheck.js und erläutert in der Dokumentation online unter mootools.floor.ch/docs/formcheck/files/formcheck-js.html im Abschnitt Optional.
Gutes Aussehen
Damit Ihre Formulare auch optisch ansprechend daherkommen, setzt Lightform das Framework Niceforms in der Version 1.0 ein. Die Integration ist denkbar einfach. Sie müssen lediglich die Javascript Bibliothek in den Header Ihrer HTML-Datei integrieren und anschließend Ihrer Form die Klasse niceform zuweisen.
<script type="text/javascript"
src="js/niceforms.js"></script>
Den Rest erledigt Niceform von alleine. Planen Sie die neuen Möglichkeiten der Version 2.0 einzusetzen, funktioniert ein einfacher Austausch der beiden niceform.js Dateien leider nicht. Lightform setzt ebenfalls eine CSS-Datei ein und diese kommen sich dann in einigen Fällen in die Quere.In diesem Fall hilft nur ein Neuaufbau des Formulars inklusive einem Abschied von Lightform. Alle die jedoch mit dem Aussehen von Lightform gut leben können, haben eine Möglichkeit gefunden, schnell ein Formular zu entwickeln, dieses ansprechend zu gestalten und eine verlässliche Validierung der Feldinhalte zu hinterlegen.
