jQuery Plugin For Form Wizard With Field Validation - formToWizard

Yet another jQuery form wizard plugin which turns your long form with field sets and legends into a step-by-step wizard with filed validation integrated.

How to use it:

1. Load the jQuery formToWizard plugin after loading jQuery library.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.formtowizard.js"></script>

2. Load the jQuery validate plugin for form validation.

<script src="/path/to/jquery.validate.min.js"></script>

3. Split your form into several steps using fieldset and legend elements. In this case, we're going to use Bootstrap 3 for basic form styles.

<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>
  <p>
      <button id="SaveAccount" class="btn btn-primary submit">Submit form</button>
  </p>
</form>

4. Create an element to place the progress bar indicating the current step you're viewing on.

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

5. Active the plugin.

$( 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)+'%');
    }
  });
});

6. All default options.

$fn.formToWizard({
  submitButton:       '',
  showProgress:       true,
  showStepNo:         true,
  validateBeforeNext: null,
  select:             null,
  progress:           null,
  nextBtnName:        'Next >',
  prevBtnName:        '< Back',
  buttonTag:          'a',
  nextBtnClass:       'btn next',
  prevBtnClass:       'btn prev'
});

---

This awesome jQuery plugin is developed by artoodetoo. For more Advanced Usages, please check the demo page or visit the official website.