I have a form with 3 steps and I want to validate each step to make sure they can't go onto the next stage with out filling out the fields. I also would like to process each stage as the user goes through it if possible. I have bootstrapValidator loaded which uses i think uses the jQuery's validation plugin.
Right now the forms uses the following jQuery to cycle between steps:
<script>
$(function() {
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active list-group-item-success").removeClass( "gray" );
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'transform': 'scale('+scale+')'});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 0,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 0,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
note: the demo I recycled uses an ease effect which I don't want so I set the duration to 0. Any of the easing effects can be removed, but i don't know how without breaking the code.
Here is my best attempt at validation and processing :
$(document).ready(function() {
$('#step1').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
zip: {
validators: {
regexp: {
regexp: /^\\d{5}(?:[-\\s]\\d{4})?$/,
message: 'Zipcode Must be in one of the following formats: 12345 or 12345-6789'
},
}
}
}// close fields
//if everything validates:
$.ajax({
type: "POST",
url: "process.php",
data: $('step1').serialize(),
success: function(msg){
// move onto next step
},
error: function(){
alert("failure");
}
});//close ajax
}); // close step 1 validation
$('#step3').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fName: {
validators: {
notEmpty: {
message: 'The first name is required and cannot be empty'
}
}
},
lName: {
validators: {
notEmpty: {
message: 'The last name is required and cannot be empty'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and cannot be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
}
}// close fields
}); // close step 3 validation
});// close function
here is my html form with each field set being a different step:
<form class="" role="form" id="msform">
<!--====== Step 1 ===========-->
<fieldset id="step1">
<h4>Step 1</h4>
<div class="form-group">
<!-- <label for="exampleInputEmail1">Zip Code</label> -->
<input type="text" class="form-control" placeholder="Zip Code" name="zip">
</div><!-- close form group -->
<div class="form-group">
<select class="form-control">
<option selected>Select Type Of Insurance</option>
<option>Car</option>
<option>Boat</option>
<option>Home</option>
</select>
</div><!-- close form group -->
<input type="button" name="next" class="next btn btn-orange btn-lg pull-right" value="Next" />
</fieldset>
<!--====== End Step 1 ===========-->
<!--====== Step 2 ===========-->
<fieldset id="step2">
<h4>Step 2</h4>
<div class="form-group">
<select class="form-control">
<option selected>Level Of Coverage</option>
<option>State Minimum Level</option>
<option>Premium Level</option>
<option>Platinum Level</option>
</select>
</div><!-- close form group -->
<div class="form-group">
<select class="form-control">
<option selected>Current Insurance Carrier</option>
<option>Nationwide</option>
<option>Allstate</option>
<option>Liberty Mutual</option>
<option>Progressive</option>
<option>Farmers</option>
<option>Hartford</option>
<option>...</option>
<option>Other</option>
</select>
</div><!-- close form group -->
<div class="form-group">
<div class="input-append date" id="dp3" data-date="" data-date-format="dd-mm-yyyy">
<input class="span2 datepicker" size="16" type="text" value="" readonly="" id="datepicker">
<span class="add-on"><i class="fa fa-calendar fa-lg"></i></span>
</div>
</div><!-- close form group -->
<br>
<input type="button" name="previous" class="previous btn btn-primary btn-lg" value="Previous" />
<input type="button" name="next" class="next btn btn-orange btn-lg pull-right" value="Next" />
</fieldset>
<!--====== End Step 2 ===========-->
<!--====== Step 3 ===========-->
<fieldset id="step3">
<h4>Step 3</h4>
<div class="form-group">
<!-- <label class="" for="fname">First Name</label> -->
<input id="fname" name="fname" type="text" class="form-control" placeholder="First Name">
</div><!-- close form group -->
<div class="form-group">
<!-- <label class="" for="fname">Last Name</label> -->
<input id="fname" name="fname" type="text" class="form-control" placeholder="Last Name">
</div><!-- close form group -->
<div class="form-group">
<!-- <label class="" for="exampleInputEmail1">Email address</label> -->
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<input type="button" name="previous" class="previous btn-primary btn btn-lg" value="Previous" />
<input type="button" name="next" class="next btn btn-orange btn-lg pull-right" value="Next" />
</fieldset>
<!--====== End Step 3 ===========-->
<!--====== Step 4 - Confirmation ===========-->
<fieldset class="form-confirmation" >
<h1 class="center">All Done!</h1>
<p class="center">Agent Max Moreclicks is waiting for your call</p>
<button type="" class="btn btn-default btn-block btn-orange ">Call Now</button>
</fieldset>
<!--====== End Step 4 - Confirmation ===========-->
</form>
Here is a link to the page with the steps part working:
http://aaronhaas.com/bsi3
I know this is prob a tough one so any help would be greatly appreciated!!!!
