Form Wizard With Field Validation In jQuery Plugin – formToWizard

formToWizard jquery plugin
File Size:16.18 KB
Views Total:573
Last Update:February 13, 2018
Publish Date:February 13, 2018
Official Website:Go to website
License:MIT

formToWizard is a jQuery plugin which allows any multi web form into a multi-step wizard with validation. it work with progressbar which can be one step complete then increase bar with step by step. this plugin support form input validations. you can easily customization with all field as you required.

How to use it:

1.  Add the jQuery formToWizard plugin wih jQuery Library :

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

2. Add Html Code with form fields :

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

3. Add element to place the progress bar :

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

4. Active the step wizard 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)+'%');
    }
  });
});

5. View 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'
});

Done