Anzeige
Tutorialbeschreibung

jQuery - Formulare mit Ketchup validieren - Teil 01

jQuery - Formulare mit Ketchup validieren - Teil 01

Für jQuery gibt es zahlreiche Plug-ins, mit denen sich Formularfelder auf korrekten Inhalt hin überprüfen, also validieren lassen. Die Auswahl reicht dabei von eher spartanischen Lösungen bis hin zu komplexen Anwendungen. Einige der wichtigsten Plug-ins werden Sie im Rahmen dieser Tutorialreihe kennenlernen. Den Anfang macht Ketchup, eine vergleichsweise einfache Lösung, die für viele Anwendungen allerdings völlig ausreichend ist.


Ketchup ist ein schlankes Plug-in für die Formularvalidierung. Das Plug-in lässt sich sehr einfach einsetzen. Bereits in den Standardeinstellungen ist man damit für die meisten Eventualitäten bestens gerüstet. Darüber hinaus lässt sich das Plug-in aber auch in Design und Umfang beliebig erweitern. Ein Hinweis noch in diesem Zusammenhang: Durch die hier gezeigten Aspekte können Sie eigene Validierungsskripte für Ketchup schreiben. Das setzt natürlich einiges an JavaScript-Know-how voraus. Sollten Sie dies nicht besitzen, gibt es zwei Möglichkeiten: Entweder Sie greifen auf die vordefinierten Validierungsoptionen von Ketchup zurück oder Sie verwenden gleich ein anderes Validierungs-Plug-in.
Im nächsten Ketchup-Tutorial lernen Sie dann die vordefinierten Validierungsoptionen kennen, die Ketchup zu bieten hat. Das folgende Beispiel zeigt, wie einfach sich Felder auf Basis von Ketchup validieren lassen:

<input type="text" id="ex1_mail" class="validate(required, email)" />
Durch diese Syntax wird überprüft, ob das Feld überhaupt ausgefüllt wurde und ob es eine syntaktisch korrekte E-Mail-Adresse enthält. 
Die offizielle Projektwebseite finden Sie unter http://demos.usejquery.com/ketchup-plugin/.

Bilder



 
Dort gibt es auch einige Beispiele, die zeigen, wie sich Ketchup im Praxiseinsatz letztendlich "anfühlt". Sobald ein Feld nicht wie angegeben ausgefüllt wurde, gibt Ketchup eine entsprechende Fehlermeldung aus.

Bilder



 
Wie diese Meldung angezeigt wird, können Sie über CSS selbst bestimmen. Aber wie eingangs dieses Tutorials bereits erwähnt: Die Standardeinstellungen leisten eigentlich gute Dienste. So wird zum Beispiel von den meisten Internetbenutzern verstanden, dass an ihren Formulareingaben etwas falsch ist, wenn eine rote Meldung angezeigt wird. Ein erstes Beispiel soll Sie mit dem Ketchup-Plug-in vertraut machen. Binden Sie dafür zunächst wie gewohnt die jQuery-Quellen ein.
<script type="text/javascript">
/* <![CDATA[ */
  google.load("jquery", "1.4");
/* ]]> */
</script>

Laden Sie sich anschließend Ketchup von der Seite http://demos.usejquery.com/ketchup-plugin/support.html herunter. Das Zip-Archiv enthält zahlreiche Dateien und Verzeichnisse. Unter anderem finden Sie darin auch eine recht umfangreiche Dokumentation des Plug-ins. Für die tägliche Arbeit sind jedoch lediglich die beiden Verzeichnisse js und css interessant. Binden Sie die entsprechenden JavaScript-Dateien folgendermaßen ein:
<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/main.js"></script>

Damit sind die Voraussetzungen geschaffen, um Ihre erste Ketchup-Anwendung zu erstellen. Für die Definition der Skripte gibt es zwei unterschiedliche Möglichkeiten:
  • Ohne Argumente
  • Mit Argumenten
Beide Versionen werden in diesem Tutorial vorgestellt.


 

Ohne Argumente

Den Anfang macht die Variante, bei der keine Argumente verwendet werden. Legen Sie sich dazu ein einfaches Formular an. Im folgenden Beispiel enthält dieses Formular lediglich ein Eingabefeld. In dieses Feld muss vor dem Absenden des Formulars das Wort Hallo eingetragen werden. Ist das nicht der Fall, wird eine Fehlermeldung ausgegeben und das Formular lässt sich nicht versenden.
[Beispiel anzeigen]
<div>Geben Sie das untenstehende Wort ein.</div>
   <form action="test.html" id="example3">
         <div>
           <label for="ex3_tomato">Hallo</label>
           <input type="text" id="ex3_tomato" class="validate(Hallo)" />
         </div>
         <div class="submit">
           <input type="submit" value="Absenden" />
         </div>
   </form>


Die eigentliche Ketchup-Syntax sieht folgendermaßen aus:
<script type="text/javascript">
 /* <![CDATA[ */
 $.fn.ketchup.messages = {
   'Hallo': 'Das ist nicht richtig',
 }
 $.fn.ketchup.validation('Hallo', function(element, value) {
   if(value == 'Hallo') return true;
   else return false;
 });
  /* ]]> */
</script>

 
Über $.fn.ketchup.messages wird die Fehlermeldung definiert. Mit if(value == 'Hallo') legt man die Bedingung fest, die erfüllt sein muss, damit das Formular verschickt werden kann. Im vorliegenden Beispiel muss der Wert des Eingabefeldes gleich Hallo sein.
[Beispiel anzeigen]

Bilder



 
Das Skript funktioniert jetzt so weit. Wie das Beispiel zeigt, fehlen momentan allerdings noch die Formatierungen. Um die Standardformatierungen zu verwenden, rufen Sie die CSS-Dateien – die im css-Verzeichnis liegen – folgendermaßen auf:
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ketchup.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />

Sollten Ihnen die Formatierungen der Fehlermeldung nicht gefallen, können Sie diese selbstverständlich anpassen. Die entsprechende Klasse finden Sie in der Datei css/jquery.ketchup.css. Verändern Sie dort bei Bedarf die Klasse .ketchup-error-container.
[Beispiel anzeigen]

Bilder



 

Mit Argumenten arbeiten

Bei der zuvor gezeigten Variante wurde ohne Argumente gearbeitet. Wie bereits angeklungen, können Sie allerdings auch Argumente angeben. Auch hierfür natürlich wieder ein Beispiel. Zunächst das gesamte Formular.
[Beispiel anzeigen]
<form action="jquery_17_beispiel_03.html" id="example4">
  <div>
    <label for="ex4_yesno">Ja oder Nein</label>
    <input type="text" id="ex3_yesno" class="validate(either(ja,nein))" />
  </div>
  <div>
    <label for="ex4_km">Hallo oder Welt</label>
    <input type="text" id="ex3_km" class="validate(either(Hallo,Welt))" />
  </div>
  <div class="submit">
    <input type="submit" value="Senden" />
  </div>
</form>

Das folgende Beispiel zeigt noch einmal im Detail, wie sich Argumente übergeben lassen:
<input type="text" id="ex3_yesno" class="validate(either(ja,nein))" />

Durch diese Syntax wird überprüft, ob in das Feld eines der beiden Worte yes oder no eingetragen wurde. Die gewünschten Werte müssen dabei durch Kommata voneinander getrennt werden. Im nächsten Schritt können Sie die Fehlermeldung definieren.
$.fn.ketchup.messages = {
  'either': 'Geben Sie bitte $arg1 oder $arg2 ein.'
}

Dabei kann auf die entsprechenden Platzhalter ($arg1, $arg2, $arg3 usw.) zurückgegriffen werden. Was nun noch fehlt, ist die Definition der eigentlichen Funktion. Diese könnte folgendermaßen aussehen:
$.fn.ketchup.validation('either', function(element, value, word1, word2) {
  var valueL = value.toLowerCase();
  if(valueL == word1.toLowerCase() || valueL == word2.toLowerCase()) return true;
  else return false;
});

Die ersten beiden Argumente einer Funktion müssen dabei element und value sein. Alles, was danach kommt, können Sie selbst bestimmen, also Ihr eigenes Validierungsskript schreiben. Im vorliegenden Fall werden intern einfach über toLowerCase() alle Zeichen in Kleinbuchstaben umgewandelt. Somit spielt es dann also keine Rolle, ob in die Felder JA oder ja oder Ja eingetragen wird. Verzichtet man auf den Einsatz von toLowerCase(), würde bei der Validierung zwischen Groß- und Kleinschreibung unterschieden werden. Die gezeigte Funktion ist zwar zugegebenermaßen sehr einfach gehalten, sie zeigt aber, wie Sie eigene Validierungsfunktionen für Ketchup schreiben können.
Abschließend muss das Skript noch entsprechend aktiviert werden. Dabei wird einfach wieder die ID des Formulars angegeben.
$(document).ready(function() {
  $('#example4').ketchup();
});

Mehr ist in diesem Fall tatsächlich nicht zu tun.
[Beispiel anzeigen]

Bilder


Fazit

Dieses Tutorial hat einen ersten Eindruck von Ketchup vermittelt. Wenn dieser Einstieg Sie inspiriert haben sollte, sich näher mit diesem Plug-in zu beschäftigen, finden Sie auf der Webseite http://demos.usejquery.com/ketchup-plugin/ ausführliche Informationen dazu. Zusätzlich wird im Rahmen von PSD-Tutorials.de aber auch noch einmal auf dieses Plug-in eingegangen.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von lustig
  • 04.11.2010 - 12:34

Für den Anfang schon mal nicht schlecht, mal sehen was Teil2 bietet.

Portrait von websmurf
  • 19.03.2010 - 08:46

Gutes Tutorial, wenn man keine Lust hat die Validierungen selber einzubauen, leistet Ketchup sicher gute Dienste.

Portrait von sychron
  • 18.03.2010 - 09:29

Gut geschriebenes Tutorial ... auch wenn mir der Einsatz von Ketchup ein wenig nach "Fighting The Framework" aussieht, was Validierung angeht ... aber das ändert ja nix am Tutorial ;-)

x
×
×