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>