Javascript form validation using Parsely.js | w3resource

Home » JavaScript » Javascript form validation using Parsely.js

Javascript form validation using Parsely.js

Posted on January 29th, 2013

Form validation is very part of developing web applications and w3resource has several  form validation tutorials. This tutorial is about how to validate form on client side using Parsely.js. It is a project which allows you to add validation for front end without writing any JavaScript code. 

Live Demo

We create an HTML file like following :

HTML Code

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Form validation with parsely.js</title>
<link href="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<link href="parsely.css" rel="stylesheet">
<style type="text/css">
body {padding-top: 20px}
h1 {margin-bottom:30px}
input, label {margin-top:10px; margin-bottom:10px}		
</style>
</head>
<body>
<div class="container">
<h1>Form validation with parsely.js</h1>

</div>
</body>
</html>

We are using bootstrap.css a base CSS and we have added parsely css for styling up errors and validation success styles. Here is the code for parsely.css

input.parsley-success, textarea.parsley-success {
        color: #468847 !important;
        background-color: #DFF0D8 !important;
        border: 1px solid #D6E9C6 !important;
      }
      input.parsley-error, textarea.parsley-error {
        color: #B94A48 !important;
        background-color: #F2DEDE !important;
        border: 1px solid #EED3D7 !important;
      }
      input {
         width: 150px;
	 margin: 0 2px !important;
        }
      ul.parsley-error-list {
          font-size: 11px;
          margin: 2px;
          list-style-type:none; 
      }
      ul.parsley-error-list li {
          line-height: 11px;
      }
      .social-buttons {
          padding: 5px 20px;
      }
      h3 {
          color: #FB4006;
      }

      .container-narrow > hr {
        margin:15px 0 0 0;
      }

      @media only screen 
      and (min-device-width : 320px) 
      and (max-device-width : 480px) {
          .not-for-mobile {
              display: none;
          }
      }

We have added some extra style explicitly within the head for creating some space above the form and creating and some more gap between form fields.

Now, parsely.js requires two JS files, jquery and parsely.js. Which we will add now at the bottom of the page. We have used a local copy of the files, but you may opt for a CDN.

<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript" src="parsley.min.js"></script>

To create a form which will be validated using parsely.js, we add following code in our HTML file:

<form  data-validate="parsley" id="registration_form">

</form>

data-validate="parsley" is required to be added for validating the form using parsely.js. You may add any id suitable for you.

Now we will start adding fields and we will also see what are the things required to add for validating that field. First filed which we add is following:

<label>Full name:</label>
  <input type="text" id="full_name" name="full_name" placeholder="FirstName LastName" data-required="true" data-trigger="keyup" data-regexp="^[A-Za-z ]+$" autofocus="autofocus">

We have used several parsely related data attributes here, data-required="true", which makes the field mandatory, data-trigger="keyup" for showing error or validation success on keyup, <br /> data-regexp="^[A-Za-z ]+$", which defines that this field can not hold any character except alphabets and white space. Note that we have used autofocus="autofocus" which is an excellent feature of HTML5 to set focus to a particular field when the page loads.

<label>Full name:</label>
  <input type="text" id="full_name" name="full_name" placeholder="FirstName LastName" data-required="true" data-trigger="keyup" data-regexp="^[A-Za-z ]+$" autofocus="autofocus">

Next field is for email. We have added data-type="email" to make sure that the field accepts email only. Besides, data-required="true" makes the field mandatory and we can see the effect of validation error/success on keyup, since we have added data-trigger="keyup"

<label>Email address:</label>
  <input type="email" id="email_addr" name="email_addr" data-required="true" data-type="email" data-trigger="keyup">

Following code ads a selection list in the form. data-required="true" makes the field mandatory.

<label>Select Tour Package:</label>	
   <select id="package" multiple="multiple" name="package" data-required="true">
                <option value="goa">Goa-7 Nights/8 Days</option>
                <option value="kashmir">Kashmir- 9 Nights/10 Days</option>
		<option value="rajasthan">Rajasthan- 9 Nights/10 Days</option>
   </select>

Next field is field for supplying date. data-type="dateIso" ensures that the date is supplied in the YYYY-mm-dd format only. data-required="true" makes the field mandatory. data-trigger="keyup" makes the effect of of validation error/success on keyup.

<label>Arrival date:</label>
  <input type="text" id="arv_dt" name="arv_dt" data-required="true" data-type="dateIso" data-trigger="keyup">

parsely.js allows us to set a range for data to be accepted by a form field. In the following field, which is for accepting numeric, we have used this feature. data-type="number" ensures that the field accepts numbers only and data-range="[1, 6]" ensures that it can accept numbers between 1 through 6 only. Here again, data-required="true" makes the field mandatory and data-trigger="keyup" makes the effect of of validation error/success on keyup.

Often, we need to add a provision in our form so that users may check some out of a given number of options. We may use check box for this purpose and with parsley.js’s excellent feature, we can make sure that users must check two out of three checkboxes supplied. Adding data-maxcheck="2" serves the purpose.

<label>Select at least two:</label>  
 Boarding<input type="checkbox" id="maxcheck" name="maxcheck[]" data-maxcheck="2" value="boarding" class="parsley-validated">
 Fooding<input type="checkbox" name="maxcheck[]" value="fooding">
 Sight seeing<input type="checkbox" name="maxcheck[]" value="sightseeing">

In the following field, we have used parsely’s features to ensure that the field accepts alphanumric only. We used data-type="alphanum" for that. data-rangelength="[10,10]" makes sure that users must supply a string of length 10.

<label>Discout Coupon code:</label>
  <input type="text" id="dis_code" name="dis_code" data-required="true" data-type="alphanum" data-rangelength="[10,10]"
   data-trigger="keyup" title="code consist of 10 alphanumeric characters."><br>

And finally, this creates the submit button for the form.

<span class="btn btn" id="demo-form-valid" onclick="javascript:$('#registration_form').parsley( 'validate' );"><i class="icon-ok"></i></span>

You may download the entire code here.

Hopefully, this tutorial will be useful for you. Let us know.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)