8. Oktober 2013 | Leave a comment 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!