How to use?
First, you need to download js library file from here then you can register for a particular form by placing an attribute as below:
<a href="http://jquery.js">http://jquery.js</a> <a href="http://parsley.min.js">http://parsley.min.js</a> <form data-parsley-validate="">...</form>
<a href="http://jquery.js">http://jquery.js</a> <a href="http://parsley.min.js">http://parsley.min.js</a> <form id="form">...</form> $('#form').parsley();
It supports multiple languages to display validation messages, you can see supported languages and to use all script just add js file into your page.
<form id="form" data-parsley-validate=""><!-- this field is just required, it would be validated on form submit --> <label for="fullname">Full Name * :</label> <input name="fullname" required="" type="text" /> <!-- this required field must be an email, and validation will be run on field change --> <label for="email">Email * :</label> <input name="email" required="" type="email" data-parsley-trigger="change" /> <!-- radio and checkbox inputs by default have to be wrapped in a parent elemnt (here) that will have success and error classes --> <label for="gender">Gender *:</label>M: <input id="genderM" name="gender" required="" type="radio" value="M" /> F: <input id="genderF" name="gender" type="radio" value="F" /> <!-- here, field is not required, it won't throw any error if no checkbox is checked. But if checked, two at least must be checked --> <label for="hobbies">Hobbies (Optional, but 2 minimum):</label> Skiing <input name="hobbies" type="checkbox" value="ski" data-parsley-mincheck="2" /> Running <input name="hobbies" type="checkbox" value="run" /> Eating <input name="hobbies" type="checkbox" value="eat" /> Sleeping <input name="hobbies" type="checkbox" value="sleep" /> Reading <input name="hobbies" type="checkbox" value="read" /> Coding <input name="hobbies" type="checkbox" value="code" /> <!-- regular select input. Nothing more to add. --> <label for="heard">Heard about us via *:</label> <select id="heard" required=""> <option value="">Choose..</option> <option value="press">Press</option> <option value="net">Internet</option> <option value="mouth">Word of mouth</option> <option value="other">Other..</option> </select> <!-- this optional textarea have a length validator that would be checked on keyup after 10 first characters, with a custom message only for minlength validator --> <label for="message">Message (20 chars min, 100 max) :</label> <textarea name="message" data-parsley-trigger="keyup" data-parsley-minlength="20" data-parsley-maxlength="100" data-parsley-validation-threshold="10" data-parsley-minlength-message="Come on! You need to enter at least a 20 character comment.."></textarea> <input type="submit" /> </form>
Here you can see how to add different attributes like
required – To validate required fields
data-parsley-mincheck=”2″ – Minimum two selection in checkbox list
data-parsley-minlength=”20″ – To validate by minimum length 20 characters
data-parsley-maxlength=”100″ – To validate by maximum length 100 characters
you can set more attributes and also you can handle events and set custom messages – more attributes and options
Parsley ships a UI/UX component that is the only one responsible for classes, error messages, focus or trigger events that alter your page. It strives to be the most UX friendly. The main features for ParsleyUI:
- Min char validation: Parsley by default does not proceed with field validation when less than 3 chars have been input. Do not assault your users with error messages too soon!
- One error at the time: constraints are prioritized in Parsley, and if several of them are not met for a field on validation, only show the most important one.
- Quick error removal: when a field is detected and shown as invalid, further checks are done on each keypress to try to quickly remove error messages once the field is ok.
- Control focusing on error: on form submission, the first error field is focused to allow the user to easily start fixing errors.