201224Jun

jQuery Walidate: Unkomplizierte Formular-Validierung

Die Validierung von HTML-Formularen mit JavaScript kann oft etwas umständlich und komplex werden, da viele Fälle abgedeckt werden müssen und Formular-Elemente mit entsprechenden Attributen versehen werden müssen. Dank CSS3 und HTML5 wurden die Möglichkeiten der Formular-Validierung schon wesentlich verbessert, aber die eigentliche Überprüfung muss dennoch per JavaScript erfolgen, sofern eine clientseitige Validierung gewünscht ist.
Wer ohnehin jQuery einsetzt und Formulare validieren möchte, kann sich in diesem Zusammenhang das Plugin jQuery Walidate von Michael Fischer ansehen. Der Grundgedanke hinter dem Plugin besteht darin, ein bestehendes HTML-Formular nicht weiter anpassen zu müssen, so dass eine einfache Integration der Validierung möglich wird.

jQuery Walidate

Das Plugin kann sowohl global als auch spezifisch auf einzelne Formular-Elemente angewendet werden. Der globale Aufruf könnte aussehen wie folgt:

  • $('#form').walidate({
  • submitSelector: 'input[type="submit"]',
  • validateClass: 'validate',
  • requiredClass: 'required',
  • validClass: 'valid',
  • errorClass: 'error',
  • doIfAllIsValid: function() {
  • // Form sent
  • },
  • doIfSomethingIsInvalid: function() {
  • // Error
  • }
  • }, function() {
  • // Callback
  • });

Die Optionen und Funktionen dürften durch ihre Benennung selbsterklärend sein. Beim Aufruf für spezifische Formular-Elemente können reguläre Ausdrücke, dazugehörige Event-Handler und die Funktionen "valid" sowie "invalid" eingesetzt werden, um auf die Eingabe des Benutzers zu reagieren. Das Plugin sieht vielversprechend aus und eine Demo findert sich bei jsFiddle.