JQuery, Programming

Client side form validation without having to write a single line of JavaScript

Parsley.js is an unobtrusive form validation library and this javascript library is very smart to handle all common validation logic and doesn’t require to write any code of javascript to validate the basic form. To use it in your form you just simply put data attributes and your form will be validated based on the name of data attributes. For example, if you have a textbox and to validate as required field then just simply put “required” attribute in input element and your form will show a message as the field is required.

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>

You can also register using javascript function as below:

<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.

Example
The basic inbuilt validation attributes and how validation works with a form?
formvalidation parsley validation

<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.
Tagged

Leave a Reply

Your email address will not be published. Required fields are marked *