Bloggerschmidt


Hier schreibt Alexander Schmidt, Webentwickler und CSS Guru



JD15DE_banner_88x31.png

jQuery Formularfelder validieren: Die Eierlegendewollmilchsau FormValidation

formvalidation.png

Auf der Suche nach einer guten Validierung für HTML-Formulare stolperte ich per Zufall über das jQuery-Plugin FormValidation. Es war Liebe auf den ersten Blick. Die Validatoren lassen kein Feld aus und der Support der Frameworks ist geglückt. Zwar ist das Plugin kostenpflichtig, doch in allen Fällen jeden Pfennig wert.

Projektseite

Das Projekt findest Du unter formvalidation.io und unter GitHub im Repository formvalidation.

5 Frameworks

Folgende Frameworks werden unterstützt:

50 Validatoren

Der Clou von FormValidation sind seine über 50 Validatoren. Sei es Kreditkarten, IBANs, Postleitzahlen, ein einzelnes Datum oder viele Dateien: Jede Eingabe in ein Formularfeld lässt sich auf Richtigkeit prüfen. Die Fülle der Beispiele verdeutlich sehr gut die Vorgehensweise bei der Implementierung.

38 Sprachen

Neben Deutsch unterstützt FormValidation 38 Sprachen, die mittels einer einzigen JavaScript-Datei implementiert werden, z. B. de_DE.js.

<script type="text/javascript" src="/vendor/formvalidation/dist/js/language/de_DE.js"></script>

Erste Schritte

FormValidation benötigt jQuery ab Version 1.9.1. Für das Einbinden sucht man sich sein Lieblings-Framework aus (Bootstrap, Foundation, etc.). Die Pfade zu den Dateien müssen individuell angepasst werden.

<!-- Bootstrap CSS v3.0.0 or higher -->
<link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">
<!-- FormValidation CSS file -->
<link rel="stylesheet" href="/vendor/formvalidation/dist/css/formValidation.min.css">
<!-- jQuery v1.9.1 or higher -->
<script type="text/javascript" src="/vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- FormValidation plugin and the class supports validating Bootstrap form -->
<script src="/vendor/formvalidation/dist/js/formValidation.min.js"></script>
<script src="/vendor/formvalidation/dist/js/framework/bootstrap.min.js"></script>

Die Datei bootstrap(.min).js von FormValidation bitte nicht (!) mit der Datei bootstrap(.min).js von Bootstrap verwechseln.

Weiter Infos siehe Including Library.

Programm-Code

Ist FormValidation implemetiert, ist es recht einfach eine Validierung für ein feld zur erstellen. Folgender Code soll es verdeutlichen:

<script>
$(document).ready(function() {
    $('#productForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        message: 'Bitte Name angeben.'
                    },
                }
            }
        }
    });
});
</script>

Man sucht sich das Formular anhand der ID und gibt an, welches Framework (und welche Icons) genutzt werden. Danach können die Regelen für die jeweiligen Felder anhand der Validatoren festgelegt werden und die Nachricht, im Falle einer Fehleingabe.

Kosten und Lizenz

Für 25,- $ Dollar (knapp 22,- EUR) bekommst Du als einzelner Entwickler ein Lifetime-Upgrade. Du kannst das jQuery-Plugin für mehrere Websites nutzen. Zudem ist der komplette Source-Code öffentlich, was die Entwicklung eigener Erweiterungen, bzw. eigener Validatoren, ermöglicht. Einmal zahlen und für immer profitieren ist schon verlockend.

Fazit

Obwohl ich als Autor die Entwickler nicht kenne und ich nicht dazu veranlasst wurde darüber zu schreiben, kann ich das jQuery-Plugin FormValidation nur wärmstens empfehlen. Die Fülle an Validatoren und unterstützen Frameworks, sowie die einfache Implementierung und Aufstellung der Regeln sucht seines Gleichen. Für knapp 22,- EUR ist es eine sehr gute und günstige Investition, wenn man vergleicht, welche Gegenleistung man dafür erhält.