Form Wizard jQuery Plugin With Input Validation – formToWizard

Form
Form Wizard jQuery Plugin With Field Validation - formToWizard
File Size: 12.88 KB
Views Total: 1090 views
Last Update:June 02, 2024
Publish Date: April 06, 2016
Official Website: Go to website
License: MIT
Plugin Author: artoodetoo
Demo    Download

Form Wizard jQuery Plugin with bootstrap for designed to create form wizards with Input field validation. It allows you to break down lengthy content or complex forms into step-by-step wizards, guiding users through the form submission process linebar. The plugin enables you to validate data entered at each step, ensuring its accuracy.

  • Form Wizard: The plugin will help you convert a lengthy or complex form into a step-by-step wizard with multiple sections or steps. This can improve the user experience by breaking down the form into manageable parts, making it easier for users to complete.
  • Field Validation: With form validation functionality, you can ensure that users provide valid and complete data before proceeding to the next step. Validation can help prevent errors and improve data accuracy.
  • Customizable Look and Feel: The form wizard’s appearance can typically be customized to match your website’s design, allowing you to style the wizard according to your needs and preferences.
  • Events and Callbacks: Form wizard plugins usually offer event hooks and callbacks that you can use to execute custom code at specific points in the form submission process.
  • Responsive Design: Modern form wizard plugins often support responsive design, ensuring that the wizard adapts to different screen sizes and devices.

How To Use Form Wizard jQuery Plugin :

Add jQuery library and jQuery formToWizard plugin.

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

Load the jQuery validate plugin for form validation.

<script src="jquery-validate/1.15.0/jquery.validate.min.js"></script>

Split your form into several steps using fieldset and legend elements. In this case, 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>

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>

Call this plugin for Form Wizard jQuery 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)+'%');
    }
  });
});

All default options.

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

Done

Thanks for make jQuery plugin is developed by artoodetoo For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.