Ajax Lightform

Formcheck ausreizen

image.jpg

© Internet Magazin

Bei Fehleingaben können Sie ein Beispiel zur Erläuterung mitgeben.

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
Diese stellen Sie am besten über den Core- Builder ( mootools.net/core ) zusammen. Darüber hinaus benötigen Sie aus den erweiterten Bibliotheken More die Komponente FX.Scroll, die Sie über den More Builder ( mootools.net/more ) extrahieren können. Binden Sie die beiden Dateien anschließend inklusive der Sprachdatei über folgende Befehlszeilen im HTML-Kopf in Ihre Anwendung ein:
<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.

image.jpg

© Internet Magazin

Damit nicht zu viel Spam mitkommt, gibt es eine kleine Spam-Hürde.

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.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".