parsley js

1<form class="demo-form">
2  <div class="form-section">
3    <label for="firstname">First Name:</label>
4    <input type="text" class="form-control" name="firstname" required="">
5
6    <label for="lastname">Last Name:</label>
7    <input type="text" class="form-control" name="lastname" required="">
8  </div>
9
10  <div class="form-section">
11    <label for="email">Email:</label>
12    <input type="email" class="form-control" name="email" required="">
13  </div>
14
15  <div class="form-section">
16    <label for="color">Favorite color:</label>
17    <input type="text" class="form-control" name="color" required="">
18  </div>
19
20  <div class="form-navigation">
21    <button type="button" class="previous btn btn-info pull-left">< Previous</button>
22    <button type="button" class="next btn btn-info pull-right">Next ></button>
23    <input type="submit" class="btn btn-default pull-right">
24    <span class="clearfix"></span>
25  </div>
26
27</form>
28
29<script type="text/javascript">
30$(function () {
31  var $sections = $('.form-section');
32
33  function navigateTo(index) {
34    // Mark the current section with the class 'current'
35    $sections
36      .removeClass('current')
37      .eq(index)
38        .addClass('current');
39    // Show only the navigation buttons that make sense for the current section:
40    $('.form-navigation .previous').toggle(index > 0);
41    var atTheEnd = index >= $sections.length - 1;
42    $('.form-navigation .next').toggle(!atTheEnd);
43    $('.form-navigation [type=submit]').toggle(atTheEnd);
44  }
45
46  function curIndex() {
47    // Return the current index by looking at which section has the class 'current'
48    return $sections.index($sections.filter('.current'));
49  }
50
51  // Previous button is easy, just go back
52  $('.form-navigation .previous').click(function() {
53    navigateTo(curIndex() - 1);
54  });
55
56  // Next button goes forward iff current block validates
57  $('.form-navigation .next').click(function() {
58    $('.demo-form').parsley().whenValidate({
59      group: 'block-' + curIndex()
60    }).done(function() {
61      navigateTo(curIndex() + 1);
62    });
63  });
64
65  // Prepare sections by setting the `data-parsley-group` attribute to 'block-0', 'block-1', etc.
66  $sections.each(function(index, section) {
67    $(section).find(':input').attr('data-parsley-group', 'block-' + index);
68  });
69  navigateTo(0); // Start at the beginning
70});
71</script>
72

1    <form class="form-horizontal" method="post" action="" data-parsley-validate>
2        <input id="textinput" name="salary" type="number" step="0.01" required class="form-control input-md" value=<c:out value="${designationInfo.salary}"/> >
3    </form>

1return $.Deferred().reject("custom message");