Help with validating and processing a multistep form

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!!!