parsleyjs with multi steps form - parsley.js

Question

I'mn creating a multi step form wizard (using Twitter Bootstrap Wizard) and looking at the Parsley multi step example I'm not sure how I would implement it if I have more then two steps my current form has at least 4 steps.
This is what I don't understand
<span class="next btn btn-info pull-right" data-current-block="1" data-next-block="2">Next ></span>
My next button is constant
Here is the parsley example
<form id="demo-form" data-parsley-validate>
<div class="first block1 show">
<label for="firstname">Firstname:</label>
<input type="text" name="firstname" data-parsley-group="block1" required/>
<label for="lastname">Lastname:</label>
<input type="text" name="lastname" data-parsley-group="block1" required />
<span class="next btn btn-info pull-right" data-current-block="1" data-next-block="2">Next ></span>
</div>
<div class="second block2 hidden">
<label for="fullname">Email:</label>
<input type="text" name="fullname" required data-parsley-type="email" data-parsley-group="block2" />
<span class="next btn btn-info pull-left" data-current-block="2" data-next-block="1">< Previous</span>
<input type="submit" class="btn btn-default pull-right" />
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('.next').on('click', function () {
var current = $(this).data('currentBlock'),
next = $(this).data('nextBlock');
// only validate going forward. If current group is invalid, do not go further
// .parsley().validate() returns validation result AND show errors
if (next > current)
if (false === $('#demo-form').parsley().validate('block' + current))
return;
// validation was ok. We can go on next step.
$('.block' + current)
.removeClass('show')
.addClass('hidden');
$('.block' + next)
.removeClass('hidden')
.addClass('show');
});
});
</script>

Answer 1

The solution or workaround is pretty simple. It's best just to use Bootstrap Wizard methods your going to want to have the following
$('#w4').bootstrapWizard({
tabClass: 'wizard-steps',
nextSelector: 'ul.pager li.next',
previousSelector: 'ul.pager li.previous',
firstSelector: null,
lastSelector: null,
onNext: function( tab, navigation, index, newindex ) {
var current = index,
next = current + 1;
// only validate going forward. If current group is invalid, do not go further
// .parsley().validate() returns validation result AND show errors
if (next > current)
if (false === $('#bioForm').parsley().validate('step' + current))
return false;
// validation was ok. We can go on next step.
$('.step' + current)
.removeClass('show')
.addClass('hidden');
$('.step' + next)
.removeClass('hidden')
.addClass('show');
}
});

Answer 2

I know this is late, but could help someone else in need .Had similar problem and this is how i solved it.
i added this to each control i need to validate on each steps
add this to step1 controls : data-parsley-group="block-1"
add this to step2 controls: data-parsley-group="block-2"
....keep increasing for each steps.
in your bootstrapwizard javascript add the code below in the 'OnNext' fuction.
$('#form').bootstrapWizard({
tabClass: 'wizard-steps',
'onNext': function (tab, navigation, index) {
var $valid = $("#form").parsley().validate({ group: 'block-' + index });
if(!$valid) {
return false;
}
}
});
Hope this helps you out.