formToWizard #3

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.rawgit.com/artoodetoo/formToWizard/v0.0.4/jquery.formtowizard.js"></script>
<div class="row wrap"><div class="col-lg-12">

    <div id='progress'><div id='progress-complete'></div></div>

    <form id="SignupForm" action="">
        <fieldset>
            <legend>Account information</legend>
            <div class="form-group">
            <label for="Name">Name</label>
            <input id="Name" type="text" class="form-control" required />
            </div>
            <div class="form-group">
            <label for="Email">Email</label>
            <input id="Email" type="email" class="form-control" required />
            </div>
            <div class="form-group">
            <label for="Password">Password</label>
            <input id="Password" type="password" class="form-control" />
            </div>
        </fieldset>

        <fieldset>
            <legend>Company information</legend>
            <div class="form-group">
            <label for="CompanyName">Company Name</label>
            <input id="CompanyName" type="text" class="form-control" required />
            </div>
            <div class="form-group">
            <label for="Website">Website</label>
            <input id="Website" type="text" class="form-control" />
            </div>
            <div class="form-group">
            <label for="CompanyEmail">CompanyEmail</label>
            <input id="CompanyEmail" type="text" class="form-control" />
            </div>
        </fieldset>

        <fieldset class="form-horizontal" role="form">
            <legend>Billing information</legend>
            <div class="form-group">
            <label...

CSS

.wrap { max-width: 980px; margin: 10px auto 0; }
#steps { margin: 80px 0 0 0 }
.commands { overflow: hidden; margin-top: 30px; }
.prev {float:left}
.next, .submit {float:right}
.error { color: #b33; }
#progress { position: relative; height: 5px; background-color: #eee; margin-bottom: 20px; }
#progress-complete { border: 0; position: absolute; height: 5px; min-width: 10px; background-color: #337ab7; transition: width .2s ease-in-out; }

JavaScript

$( function() {
  var $signupForm = $( '#SignupForm' );

  $signupForm.validate({errorElement: 'em'});

  $signupForm.formToWizard({
    submitButton: 'SaveAccount',
    nextBtnClass: 'btn btn-primary next',
    prevBtnClass: 'btn btn-default prev',
    buttonTag:    'button',
    validateBeforeNext: function(form, step) {
      var stepIsValid = true;
      var validator = form.validate();
      $(':input', step).each( function(index) {
        var xy = validator.element(this);
        stepIsValid = stepIsValid && (typeof xy == 'undefined' || xy);
      });
      return stepIsValid;
    },
    progress: function (i, count) {
      $('#progress-complete').width(''+(i/count*100)+'%');
    }
  });
});