Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Um Website-Formulare auf Fehleingaben zu prüfen existieren unzählige Validierungs-Plugins und Tools. Leider sind viele dieser Tools kompliziert zu implementieren und erfordern zudem Anpassungen am HTML-Quellcode des Formulars.
Wenn das Formular allerdings dynamisch generiert wird oder über ein Plugin erstellt wurde, ist es häufig nicht möglich den HTML-Code anzupassen. Hier eilt das jQuery-Plugin „jQuery Walidate“ zur Hilfe und ermöglicht die Validierung bestehender HTML-Formulare ohne Änderungen am Quellcode vornehmen zu müssen. Neben einer einfachen Integration des Plugins in die Website stehen umfangreiche Funktionen wie individuelle Fehlermeldungen etc. zur Verfügung.

Website Screenshot von jQuery Walidation

Wie funktioniert jQuery Walidate?

jQuery Walidate lässt sich sehr einfach in jede Website implementieren. Zunächst werden jQuery und das Plugin aufgerufen und ihr müsst festlegen welcher Selektor (hier: das form-Element) als Container für die Validierung dienen soll. Im zweiten Schritt definiert ihr alle Eingabefelder über ihren jeweiligen Selektor. Das war auch schon die unbedingt notwendige Basis-Konfiguration. Wird das Formular nun abgeschickt, prüft das Plugin die festgelegten Felder auf Fehleingaben.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="path/to/jquery.walidate.compressed.js"></script>
<script type="text/javascript">
    $(window).load(function(){    
        $('form').walidate(); // Initalize the form
        $(selector).walidate('validate'); // Make this element required
    });
</script>

Umfangreiche Anpassungsmöglichkeiten

Das oben gezeigte Beispiel nutzt die Standard-Konfiguration zur Validierung des Formulars. Ihr könnt das Plugin sehr detailliert an eure Bedürfnisse anpassen und beispielsweise eigene Fehlermeldungen ausgeben, Eingaben per Regular Expressions auf Gültigkeit prüfen oder einen Dateianhang zur Bedingung für den Versand des Formulars machen.

Online-Dokumentation von jQuery Walidation
Online-Dokumentation des Plugins

Auf der Website des Plugins findet ihr dazu eine umfangreiche und leicht verständliche Dokumentation, sowie eine Live-Demo auf jsFiddle.

Links zum Thema

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 2 Kommentare

  1. Stephan
    schrieb am 15.02.2017 um 17:38 Uhr:

    Ich weiß jetzt, dass es etwas gibt. Als ich das Skript in die Seite eingebaut habe, tat sich nichts. Die Seite hilft mir auch nicht weiter. Wenn ich grundsätzlich innerhalb von einer halben Stunde keine Reaktion mit einem System erzeugen kann, dann ist die Erklärung oder das System schlecht.

    Antworten
  2. Andre
    schrieb am 27.06.2012 um 13:32 Uhr:

    Coole Sache! Werde ich mal bei Zeiten testen :)

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →