js parsleyjs code example
Example: parsley js
<form class="demo-form">
<div class="form-section">
<label for="firstname">First Name:</label>
<input type="text" class="form-control" name="firstname" required="">
<label for="lastname">Last Name:</label>
<input type="text" class="form-control" name="lastname" required="">
</div>
<div class="form-section">
<label for="email">Email:</label>
<input type="email" class="form-control" name="email" required="">
</div>
<div class="form-section">
<label for="color">Favorite color:</label>
<input type="text" class="form-control" name="color" required="">
</div>
<div class="form-navigation">
<button type="button" class="previous btn btn-info pull-left">< Previous</button>
<button type="button" class="next btn btn-info pull-right">Next ></button>
<input type="submit" class="btn btn-default pull-right">
<span class="clearfix"></span>
</div>
</form>
<script type="text/javascript">
$(function () {
var $sections = $('.form-section');
function navigateTo(index) {
$sections
.removeClass('current')
.eq(index)
.addClass('current');
$('.form-navigation .previous').toggle(index > 0);
var atTheEnd = index >= $sections.length - 1;
$('.form-navigation .next').toggle(!atTheEnd);
$('.form-navigation [type=submit]').toggle(atTheEnd);
}
function curIndex() {
return $sections.index($sections.filter('.current'));
}
$('.form-navigation .previous').click(function() {
navigateTo(curIndex() - 1);
});
$('.form-navigation .next').click(function() {
$('.demo-form').parsley().whenValidate({
group: 'block-' + curIndex()
}).done(function() {
navigateTo(curIndex() + 1);
});
});
$sections.each(function(index, section) {
$(section).find(':input').attr('data-parsley-group', 'block-' + index);
});
navigateTo(0);
});
</script>