Diese Woche möchte ich euch ein Javascript Tool zum automatischen validieren eurer Formulare vorstellen – das ganze nennt sich „Parsley.js“ und ist als jQuery/Zepto Plugin oder als „standalone“ Paket in der Version 1.1.18 verfügbar.

Was macht Parsley genau?

Parsley ist ein Tool, das euch mit der Frontend-Validierung von Formularen hilft. Das schöne dabei: Ihr braucht keine Zeile Javascript schreiben – Stattdessen arbeitet ihr mit HTML „data-*“ Attributen (Das Beispiel kommt direkt von der Projektseite):

<form id="demo-form" data-validate="parsley">
    <label for="fullname">Full Name * :</label>
    <input type="text" id="fullname" name="fullname" data-required="true" />

    <label for="email">Email * :</label>
    <input type="text" id="email" name="email" data-trigger="change" data-required="true" data-type="email" />

    <label for="website">Website :</label>
    <input type="text" id="website" name="website" data-trigger="change" data-type="url" />

    <label for="message">Message (20 chars min, 200 max) :</label>
    <textarea id="message" name="message" data-trigger="keyup" data-rangelength="[20,200]"></textarea>
</form>

Wie wir sehen schaut das ganze relativ simpel aus. Wir definieren mit Hilfe von „data-required“ ob es sich um ein Pflichtfeld handelt und mit „data-type“ um was für einen Typen (E-Mail, URL, …). Die restlichen Attribute, wie z.B. „data-trigger“ und „data-rangelength“ sind lediglich Optionen, die optional gesetzt werden können.
Eine vollständige Liste kann in der Parsley Dokumentation eingesehen werden.

Gibt es Abhängigkeiten zu anderen Tools?

Ja. Es gibt das Tool entweder als jQuery / Zepto Plugin oder „standalone“… Doch laut Dokumentation bringt die standalone-Version Zepto ganz einfach mit 😉 Also benötigt Parsley auf jeden Fall ein Framework im Hintergrund.

Was lässt sich validieren?

Im Grunde bringt Parsley alle wichtigen Typen mit, die mit Hilfe von data-type="<type>" gesetzt werden:

• email für E-Mail-Adressen
• url und urlstrict für URLs mit Protokoll
• digits Ziffern
• number Zahlen
• alphanum für Alphanumerische Zeichen
• dateIso
• phone

Dazu gibt es folgende Optionen:

• data-required="true" oder class="required" oder required="required" (HTML5) Definiert das aktuelle Feld als Pflichtfeld
• data-notblank="true" Das Feld darf nicht leer sein
• data-minlength="6" Definiert eine mindest länge von 6 Zeichen für das Feld
• data-maxlength="6" Definiert eine maximal länge von 6 Zeichen für das Feld
• data-rangelength="[5,10]" Definiert eine länge zwischen 5 und 10 Zeichen
• data-min="6" oder type="number" min="6" (HTML5) Definiert, das der Inhalt des Feldes mindestens 6 betragen muss
• data-max="100" oder type="number" max="100" (HTML5) Definiert, das der Inhalt des Feldes maximal 100 betragen darf
• data-range="[6, 100]" oder type="range" min="6" max="100" (HTML5) Definiert einen Zahlenbereich zwischen 6 und 100
• data-regexp="<regexp>" oder pattern="<regexp>" (HTML5) Definiert einen regulären Audruck für das aktuelle Feld
• data-equalto="#elem" Identisch zu einem anderen Feld mit der ID ‚elem‚
• data-mincheck="2" Es müssen mindestens 2 Checkboxen angehakt werden
• data-maxcheck="2" Es dürfen maximal 2 Checkboxen angehakt werden
• data-rangecheck="[1,2]" Es müssen zwischen 1 und 2 Checkboxen angehakt werden
• data-remote="http://example.com" Die URL wird per Ajax aufgerufen um den eingegebenen Wert Serverseitig validieren zu lassen. Spätestens durch diesen Parameter sollten sich alle Fälle abdecken lassen, die nicht mit Hilfe der Standard-Typen zu erfassen sind.

Und natürlich noch einige „parsley.extra validators“:

• data-minwords="6" Mindestens 6 Wörter
• data-maxwords="6" Maximal 6 Wörter
• data-rangewords="[6,10]" Zwischen 6 und 10 Wörter
• data-greaterthan="#elem" „Mehr als“ das Element mit der ID ‚elem‚
• data-lessthan="#elem" „Weniger als“ das Element mit der ID ‚elem‚
• data-beforedate="#elem" Validiert ein Datum, vor dem aus dem Element mit der ID ‚elem‚
• data-afterdate="#elem" Validiert ein Datum, nach dem aus dem Element mit der ID ‚elem‚
• data-inlist="foo, bar, foo bar" Definiert, das der eingegebene Wert einer der vorgegebenen Werte entsprechen muss
• data-luhn="true" Definiert, das der eingegebene Wert dem Luhn-Algorithmus passieren muss (z.B. für Kreditkarten)
• data-americandate="true"

HTML Attribute schön und gut, aber ich möchte Javascript nutzen!

Natürlich verfügt Parsley über eine Javascript API – mit Hilfe dieser API können theoretisch die gleichen Dinge gesteuert werden wie über die HTML Attribute. Außerdem lassen sich diverse Callbacks verwenden um die Validation etwas mehr zu individualisieren… Priorisiert wird allerdings die Nutzung der HTML Attribute.

Weiteres

Parsley ist natürlich auch bei github zu finden und scheint relativ aktiv entwickelt zu werden… Darüber hinaus gibt es Sprachdateien für etwas über 30 Sprachen – Deutsch ist auch dabei 😉

Und mit diesen Worten möchte ich den Beitrag für diese Woche auch schon abschließen und euch allen eine angenehme Rest-Woche wünschen! Stellt was cooles auf die Beine und lasst mich wissen, wenn ihr hier mal zu einem bestimmten Thema was lesen möchtet!