Anzeige
Tutorialbeschreibung

jQuery - Formulare mit Ketchup validieren - Teil 02

jQuery - Formulare mit Ketchup validieren - Teil 02

Im ersten Teil der kleinen Ketchup-Tutorialreihe wurde gezeigt, wie man mittels Ketchup eigene Validierungsfunktionen umsetzen kann. Das ist natürlich nicht jedermanns Sache. Allerdings kann man das Ketchup-Plug-in auch ohne das Schreiben eigener Funktionen nutzen. Denn das Plug-in bietet umfangreiche Basisvalidierungsfunktionen, die die meisten Anwendungszwecke abdecken. Lernen Sie in diesem Tutorial die wichtigsten dieser Funktionen kennen.


Will man mit reinem JavaScript Formularfelder validieren, muss man zumindest Programmiergrundkenntnisse besitzen. Normalerweise schreibt man dort nämlich eine entsprechende Funktion, die über eine Schleife die Felder abfragt. Dank des Ketchup-Plug-ins stellt sich diese Sache deutlich unkomplizierter dar. Wie einfach sich die in Ketchup vordefinierten Validierungsoptionen einsetzen lassen, zeigt das folgende Beispiel:

<input type="password" id="ex1_password" class="validate(required)" />

Hier wurde ein Passwortfeld definiert. Dieses Feld wurde über validate(required)als Pflichtfeld gekennzeichnet. Auf ähnliche Weise lassen sich in Ketchup beispielsweise auch E-Mail-Felder und Checkboxen validieren.

Das folgende Beispiel zeigt eine typische Ketchup-Anwendung. Um mit Ketchup effektiv arbeiten zu können, laden Sie sich zunächst die Plug-in-Dateien von der Seite http://demos.usejquery.com/ketchup-plugin/support.html herunter. Nach dem Entpacken des Archivs binden Sie die entsprechenden CSS- und JavaScript-Dateien ein.
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ketchup.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.messages.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.validations.basic.js"></script>

Diese Skripte bieten Ihnen den größtmöglichen Gestaltungsspielraum. Sollten Sie sich jedoch mit den Standardoptionen zufriedengeben wollen, können Sie das Ganze auch auf ein Minimum reduzieren. In diesem Fall genügt es, wenn Sie die folgenden Dateien einbinden.
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ketchup.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.basic.min.js"></script>

Hier müssen Sie dann allerdings auf die Standardfehlermeldungen und die Basisvalidierungen zurückgreifen. Im nächsten Schritt kann das eigentliche Formular angelegt werden. Dabei können Sie auf die bekannten und üblichen HTML-Formularelemente zurückgreifen. Weisen Sie den Feldern jeweils das id- und das class-Attribut zu.
<input type="password" id="ex1_password" class="" />

Dem class-Attribut kommt im Zusammenhang mit dem Ketchup-Plug-in eine ganz entscheidende Bedeutung zu. Denn darüber legt man letztendlich fest, auf welche Art und Weise das Feld validiert werden soll. Dem class-Attribut weist man als Wert zunächst validate() zu.
<input type="password" id="ex1_password" class="validate()" />

Innerhalb der Klammern wird dann angegeben, auf welche Bedingung das Feld hin validiert werden soll. Wollen Sie zum Beispiel, dass ein Feld unbedingt ausgefüllt werden muss, setzen Sie required ein.
<input type="password" id="ex1_password" class="validate(required)" />

Neben diesem required gibt es noch zahlreiche andere Optionen. Die folgende Liste zeigt, welche das sind.
  • required – Es handelt sich um ein Pflichtfeld.
  • minlength(min) – Der eingetragene Wert muss mindestens die unter min angegebene Länge haben.
  • maxlength(max) – Der eingetragene Wert darf höchstens die unter max angegebene Länge haben.
  • rangelength(min, max) – Der eingetragene Wert muss eine Länge haben, die zwischen den bei min und max angegeben Werten liegt.
  • min(min) – Die Zahl muss mindestens min sein.
  • max(max) – Die Zahl darf höchstens max sein.
  • range(min, max) – Die Zahl muss zwischen min und max liegen.
  • number – Bei dem Wert muss es sich um eine Zahl handeln.
  • digits – Bei dem Wert muss es sich um Ziffern handeln.
  • email – Das Feld muss eine valide E-Mail-Adresse enthalten.
  • url – Es muss eine valide URL eingetragen werden.
  • username – Es muss sich um einen gültigen Benutzernamen handeln. Erlaubt sind Zahlen zwischen 0 und 9, Buchstaben (A bis Z) sowie der Unter- und der Bindestrich.
  • match(selector) – Der Wert muss mit dem Wert des Feldes übereinstimmen, das über den angegebenen Selektor angesprochen wird. Ideal ist das z.B. für das Anlegen von Passwörtern. So kann man den Anwender auffordern, dass er das vergebene Passwort noch einmal zur Kontrolle angeben muss. Zu diesem Aspekt gibt es gleich noch ein Beispiel.
  • date – Es muss sich um eine Datumsangabe handeln.
  • minselect(min) – Es muss mindestens die bei min angegebene Anzahl an Checkboxen ausgewählt werden. Wenden Sie diese Option lediglich bei einer Checkbox innerhalb einer Checkboxgruppe an.
  • maxselect(max) – Es darf höchstens die bei max angegebene Anzahl an Checkboxen ausgewählt werden. Wenden Sie diese Option lediglich bei einer Checkbox innerhalb einer Checkboxgruppe an.
  • rangeselect(min, max) – Es muss die Anzahl an Checkboxen ausgewählt werden, die über min und max begrenzt sind.

Das folgende Beispiel zeigt, wie sich die angesprochene Passwortproblematik umsetzen lässt.
  <div>
     <label for="ex1_password">Passwort</label>
     <input type="password" id="ex1_password" class="validate(required)" />
   </div>
   <div>
     <label for="ex1_password_conf">Passwort wiederholen</label>
     <input type="password" id="ex1_password_conf" class="validate(required, match(#ex1_password))" />
   </div>

Hier wurden zwei Passwortfelder definiert. Bei dem ersten Feld handelt es sich um ein durch required gekennzeichnetes Pflichtfeld. Dort muss vom Benutzer also ein Passwort eingetragen werden. Das zweite Feld ist ebenfalls eine Pflichtangabe. Hier muss das Passwort wiederholt werden. Um zu überprüfen, ob die beiden Passwörter identisch sind, wird match() der entsprechende Selektor übergeben. Im vorliegenden Fall handelt es sich dabei um das Passwortfeld mit der ID ex1_password.

Das folgende – etwas umfangreichere – Beispiel zeigt noch einmal verschiedene Aspekte der Formularvalidierung.
[Beispiel anzeigen]
<form action="jquery_18_beispiel_01.html" id="formular">
   <div>
     <label for="ex1_username">Benutzername</label>
     <input type="text" id="ex1_username" class="validate(required, username)" />
   </div>
   <div>
     <label for="ex1_password">Passwort</label>
     <input type="password" id="ex1_password" class="validate(required)" />
   </div>
   <div>
     <label for="ex1_password_conf">Passwort wiederholen</label>
     <input type="password" id="ex1_password_conf" class="validate(required, match(#ex1_password))" />
   </div>
   <div>
     <label for="ex1_roles">Lieblingsband</label>
     <p>
       <input type="checkbox" name="role" value="jquery" />
       Green Day</p>
     <p>
       <input type="checkbox" name="role" value="js" />
       Bad Religion</p>
     <p>
       <input type="checkbox" name="role" value="rails" />
       The Offspring</p>
     <p>
       <input type="checkbox" name="role" value="php" />
       Dropkick Murphys</p>
     <p>
       <input type="checkbox" name="role" value="other" class="validate(rangeselect(1,3))" />
       Andere</p>
     <div class="clear"></div>
   </div>
   <div>
     <label for="ex1_about">Nachricht</label>
     <textarea id="ex1_about" rows="1" class="validate(rangelength(10,140))"></textarea>
   </div>
   <div class="submit">
     <input type="submit" value="Senden" />
   </div>
 </form>

Das Beispiel funktioniert in dieser Form bereits.
[Beispiel anzeigen]

Bilder



Es hat allerdings noch einen entscheidenden Nachteil: Die Fehlermeldungen sind auf Englisch. Um diese zu übersetzen, öffnen Sie die Datei jquery.ketchup.messages.js. Dort können Sie die Fehlermeldungen entsprechend anpassen. Sie können übrigens auch auf ein Feld mehrere Bedingungen anwenden. Wie so etwas geht, zeigt die folgende Syntax:
<input type="text" class="validate(required, username, rangelength(3,20))" />

Hier wird das Feld zunächst als Pflichtfeld definiert. Hinter dem Komma wird über username festgelegt, dass in das Feld ein gültiger Benutzername eingetragen werden muss. Dieser Name darf nur aus den Zahlen zwischen 0 und 9, aus den Buchstaben A bis Z sowie dem Unter- und dem Bindestrich bestehen. Über rangelength(3,20) wird schlussendlich festgelegt, wie lang der Benutzername mindestens (3 Zeichen) und höchstens (20 Zeichen) sein darf.

Fazit

Das Ketchup-Plug-in lässt sich – und das hat dieses Tutorial gezeigt – sehr einfach bedienen. Wenige Handgriffe genügen, um Formularfelder zu validieren. Durch die sehr einfache Syntax, bei der man ausschließlich auf HTML-Syntax zurückgreift, ist Ketchup vor allem für all diejenigen, die Skriptsprachen scheuen, eine interessante Alternative.


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Pfoto76
  • 02.04.2010 - 09:01

Danke für diese Einfühurng; ich hatte vorher noch nie von Ketchup gehört.
Jürgen

Portrait von oionline
  • 01.04.2010 - 21:59

Super einfach erklärt. Ich hab mich immer um validierung gedrückt aber hiermit wird es zum kinderspiel.

Portrait von lustig
  • 26.03.2010 - 21:21

Gute EInführung in die Formular-Validierung mit Ketchup.

x
×
×