Quick & Easy Form Validation Example with Parsley.js | Coding Cage

Quick & Easy Form Validation Example with Parsley.js

By
Hello everyone, today in this tutorial we will see How to Validate Registration Form using Parsley.JS, Parsley is the ultimate JavaScript form validation library, In one of my previous tutorial we already seen Simple HTML Form Validation using jQuery Plugin, well there's a lot's of way in that we can validate web forms using server side or client side by writing custom client/server side code which can be JavaScript or PHP, or it can be also done by using some jQuery Validation Plugins/Libraries, in-between i have found Parsley that is widely used in most of bootstrap admin themes that i have seen, so let's have a look how to use it, you can check demo of parsley validation before proceeding.
Quick & Easy Form Validation Example with Parsley.js





Parsley.Js

First of all, let me tell you something about Parsley, It's an awesome validation library that contains all the types of validation you generally need and it comes with very light-weight size, and for validation it uses specific DOM API that is data-attributes, so you don't have to write any single line of JavaScript code, in short we can say that it is, a very light-weight and feature-rich library.

Parsley's default DOM API is data-parsley-. and you just need to use it's property, property means email, number, date, digit etc, suppose if you want to validate email input, then you just have to add data-parsley-type="email" data-attribute in the same input element, that's it.

Get Started

Now let's see, How To use this ultimate validation library in your web projects for that you just have to download the files from Parsley Download page and get the current v2.4.4 version. or if your are already using previous version then don't forget to upgrade with the latest.

after downloading the files you just need to add it within your document/page where you want to validate forms, but remember one thing, that you need to include jQuery file before including parsley file like this:


<script src="jquery-1.12.4-jquery.min.js"></script>
<script src="parsley.min.js"></script>

there are two ways in which you can use parsley first one is by using data-parsley-validate attribute in form tag and another ways by using single and short line of javascript code $('form').parsley();

1st way - Basic

<form data-parsley-validate>
<!-- form input goes here -->
</form>

<script src="jquery.js"></script>
<script src="parsley.min.js"></script>

2nd way - JavaScript

<form id="regform">
<!-- form input goes here -->
</form>


<script src="jquery.js"></script>
<script src="parsley.min.js"></script>

<script type="text/javascript">
  $('#regform').parsley();
</script>

As i said, it uses data-attributes so you just have to add built-in data-attributes of parsley in any input field that you want to validate and parsley does the rest thing for you, that's it.

Now let's take a registration form example, i have used here bootstrap for the form design.


<form method="post" class="form-horizontal">
     
 <div class="form-group">
 <label class="col-sm-3 control-label">Alphabets</label>
 <div class="col-sm-6">
 <input type="text" class="form-control" required data-parsley-pattern="^[a-zA-Z ]+$" placeholder="Type something" />
 </div>
 </div>
            
           
 <div class="form-group">
 <label class="col-sm-3 control-label">Equal To</label>
 <div class="col-sm-3">
 <input type="password" id="pass2" class="form-control" required data-parsley-length="[6, 10]" data-parsley-trigger="keyup" placeholder="Password" />   
        </div>
 <div class="col-sm-3">
 <input type="password" class="form-control" required data-parsley-equalto="#pass2" data-parsley-trigger="keyup" placeholder="Re-Type Password" />    
        </div>
 </div>
            
 <div class="form-group">
 <label class="col-sm-3 control-label">E-Mail</label>
 <div class="col-sm-6">
 <input type="email" class="form-control" required data-parsley-type="email" data-parsley-trigger="keyup" placeholder="Enter a valid e-mail" />    
        </div>
 </div>
     
 <div class="form-group">
 <label class="col-sm-3 control-label">URL</label>
 <div class="col-sm-6">
 <input type="url" class="form-control" required data-parsley-type="url" placeholder="URL" />
 </div>
 </div>
     
 <div class="form-group">
 <label class="col-sm-3 control-label">Number</label>
 <div class="col-sm-6">
 <input type="text" class="form-control" required data-parsley-type="number" placeholder="Enter only numbers" />
 </div>
 </div>
     
 <div class="form-group">
 <label class="col-sm-3 control-label">Alphanumeric</label>
 <div class="col-sm-6">
 <input type="text" class="form-control" required data-parsley-type="alphanum" placeholder="Enter alphanumeric value" />
 </div>
 </div>
     
 <div class="form-group">
 <label class="col-sm-3 control-label">Select Box</label>
 <div class="col-sm-6">
 <select class="form-control" required>
      <option value="" selected="selected"> - Select - </option>
      <option>First Value</option>
      <option>Second Value</option>
             <option>Third Value</option>
      <option>Fourth Value</option>
 </select>
 </div>
 </div>
     
 <div class="form-group">
 <label class="col-sm-3 control-label">Textarea</label>
 <div class="col-sm-6">
 <textarea required class="form-control"></textarea>
 </div>
 </div>
     
 <div class="form-group">
 <div class="col-sm-offset-3 col-sm-9 m-t-15">
 <button type="submit" class="btn btn-primary">Submit</button>
 <button type="reset" class="btn btn-default m-l-5">Cancel</button>
 </div>
 </div>
     
</form>

form will look like:
Bootstrap Form Design

Add Parsley Validation : javaScript

<script src="jquery-1.12.4-jquery.min.js"></script>
<script src="parsleyjs/dist/parsley.min.js"></script>
 
<script>
$(document).ready(function(){
 $('form').parsley();
});
</script>

Here's how the validated form will look like :
Validated Bootstrap Form with Parsley

well, there is parsley.css file available to stylify errors when you download the files, but i have used here bootstrap for the form design so i make some changes in the css file which looks like bootstrap validation states.


input.parsley-error,
select.parsley-error,
textarea.parsley-error {    
    border-color:#843534;
    box-shadow: none;
}


input.parsley-error:focus,
select.parsley-error:focus,
textarea.parsley-error:focus {    
    border-color:#843534;
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483
}

there are much more built-in validators(api's) or we can say parsley data-attributes you can use, but i have used here those common and regular api's that we need generally in our forms. and as per the above form i have used following, let's check them.

required is the common html5 attribute which forces you to enter some value, but using only required attribute is not recommended, and parsley also works very well with required attribute, whereas parsley has data-parsley-required api for the same.

Validators
Api(Parsley Attribure) Description
data-parsley-required It makes the field mandatory
data-parsley-pattern="^[a-zA-Z ]+$" Pattern accepts only alphabets with white space.
data-parsley-length="[6, 10]" It define the length of string, should within 6-10
data-parsley-trigger="keyup" trigger the validation on keyup event
data-parsley-equalto="#pass2" matches the two fields value is same or not by specifying id
data-parsley-type="email" checks the entered value is valid email or not
data-parsley-type="number" accepts only valid numbers
data-parsley-type="alphanum" accepts only alphanumeric strings

so, these are the in-built data validators(api) of parsley which i have used in the above form, though there are lot's of validators are available which you can use as your need.

you can download the whole, well detailed documentation available on the official site and get started with it, so validating forms with the custom javaScript code, isn't it cool to use parsley which allows you to validate your forms without writing any single line of JavaScript code, or if you are validating your forms with PHP even then i recommend you to use client-side validation, don't worry it doesn't affect your server server-side validation.

that's it, i hope you guys like the tutorial and please don't forget to share it. or if you are facing any issues with any of code, feel free to ask.



6 comments:

  1. Nice blog. ServerPoint Launches New Affiliate Program ! Utilizing our tools to create custom tracking links, you can refer clients to sign up to ServerPoint's services and then receive a very profitable commission upto $1000 per qualifying sale!

    ReplyDelete
  2. hi there, ive tried to run this code on my website but the parsley.css just wont came out same like yours..have any idea?

    ReplyDelete
  3. hi there, ive tried your code inside my website, but the parsley.css just wont came out the same as yours..any idea?

    ReplyDelete
  4. it helped me very well, thnks

    ReplyDelete
    Replies
    1. you're welcome, Ibrahim, Keep Visiting. :)

      Delete
  5. There are many interesting information included and i can easily understand all given information.I post something on my blog to post something, or wait to post something worth saying. Keep update more information....
    There are many interesting information included and i can easily understand all given information.I post something on my blog to post something, or wait to post something worth saying. Keep update more information....

    ReplyDelete