201017Feb

Ketchup: Moderne Formular-Validierung mit jQuery

Zur Überprüfung von Benutzereingaben in HTML-Formularen eignet sich JavaScript bestens. Für jQuery gibt es diverse Plugins, mit denen Formulare in Echtzeit verifiziert werden können. Ein aktuelles Skript dieser Art stellt Ketchup dar — mit dieser jQuery-Erweiterung werden bei fehlenden Eingaben über den entsprechenden Feldern (input) Hinweise eingeblendet, die den Benutzer auf das Pflichtfeld aufmerksam machen.

jQuery-Plugin - Ketchup

Das Skript erwartet spezielle Klassen (class) und wird im JavaScript-Code auf das Formular-Element (form) angewendet:

  • HTML:
  • <form id="element" action="index.php" method="post">
  • <input type="text" class="validate(required, username)" />
  • </form>
  •  
  • jQuery:
  • $("#element").ketchup();

Neben einfachen Pflichtfeldern können damit auch weitere Funktionalitäten realisiert werden. So kann etwa überprüft werden, ob es sich bei der Benutzereingabe um eine valide Datumsangabe oder E-Mail-Adresse handelt. Das Aussehen der Hinweise lässt sich per CSS anpassen und konfigurieren. Die Nachrichten sind in einer separaten Datei ("jquery.ketchup.messages.js") gespeichert. Beim Download des Skriptes sind bereits diverse Beispiele und Möglichkeiten enthalten.
Interessant bei der Klassen-Schreibweise im HTML-Teil ist übrigens die W3C-Validierung.

UPDATE
Das Projekt besteht in der Form nicht mehr.