Form wizard

Bootstrap Stepper is a smart UI component which allows you to easily create wizard-like interfaces. This plugin groups content into sections for a more structured and orderly page view.
Read the official Bootstrap Stepper Documentation for a full list of instructions and other options.

1. Initialize the plugin by referencing the necessary files:

<!-- Vendor files -->
<script src="bs-stepper.min.js"></script>
<link rel="stylesheet" type="text/css" href="bs-stepper.min.css">

<!-- Template files -->
<link rel="stylesheet" type="text/css" href="app-assets/css/plugins/forms/form-wizard.css">

      
2. Binding to existing DOM element.

<div class="bs-stepper wizard-example">
  <div class="bs-stepper-header">
    <div class="step" data-target="#account-details">
      <button type="button" class="step-trigger">
        <span class="bs-stepper-box">1</span>
        <div class="bs-stepper-label">
          <span class="bs-stepper-title">Account Details</span>
          <span class="bs-stepper-subtitle">Setup Account Details</span>
        </div>
      </button>
    </div>
    <div class="line">
      <i data-feather="chevron-right" class="font-medium-2"></i>
    </div>
    <!-- More Steps goes here -->
    ...
  </div>
  <div class="bs-stepper-content">
    <div id="account-details" class="content">
      ...
    </div>
  </div>
</div>

      
3. Basic usage looks something like this:

var wizardExample = document.querySelector('.wizard-example')

if (typeof wizardExample !== undefined && wizardExample !== null) {
  var wizardStepper = new Stepper(wizardExample, {
    linear: false,
  })
  $(wizardExample)
    .find('.btn-next')
    .on('click', function () {
      wizardStepper.next()
    })
  $(wizardExample)
    .find('.btn-prev')
    .on('click', function () {
      wizardStepper.previous()
    })

  $(wizardExample)
    .find('.btn-submit')
    .on('click', function () {
      alert('Submitted..!!')
    })
}

      

Following are the options that can be used:

Options Class Description
Vertical Wizard .vertical Use this class along with .bs-stepper for vertical oriented wizard.
Icons in Steps N/A Just add an icon instead of number as a child element of .bs-stepper-box class.
Modern Wizard .wizard-modern Use this class for modern styled wizard. Use this class to place steps outside the card.
Vertical Modern Wizard .wizard-modern.vertical Use these classes for vertical oriented modern styled wizard.

Refer following links for detailed documentation, configuration options, methods and examples:

Styling Wizard

Following code adds crossed class to the steps for better styling:

          
// Adds crossed class
var bsStepper = document.querySelectorAll('.bs-stepper')

if (typeof bsStepper !== undefined && bsStepper !== null) {
  for (var el = 0; el < bsStepper.length; ++el) {
    bsStepper[el].addEventListener('show.bs-stepper', function (event) {
      var index = event.detail.indexStep
      var numberOfSteps = $(event.target).find('.step').length - 1
      var line = $(event.target).find('.step')

      // The first for loop is for increasing the steps,
      // the second is for turning them off when going back
      // and the third with the if statement because the last line
      // can't seem to turn off when I press the first item.

      for (var i = 0; i < index; i++) {
        line[i].classList.add('crossed')

        for (var j = index; j < numberOfSteps; j++) {
          line[j].classList.remove('crossed')
        }
      }
      if (event.detail.to == 0) {
        for (var k = index; k < numberOfSteps; k++) {
          line[k].classList.remove('crossed')
        }
        line[0].classList.remove('crossed')
      }
    })
  }
}

        

Wizard Validation

Use jQuery validate to add validation to form. For more details on jQuery validation, visit here.

Please Note: You'll have to include jQuery validation plugin files.

You can take HTML code from the above example and wizard validation code from as under:

        
var wizardExample = document.querySelector('.wizard-example')

if (typeof wizardExample !== undefined && wizardExample !== null) {
  var numberedStepper = new Stepper(wizardExample),
    $form = $(wizardExample).find('form')
  $form.each(function () {
    var $this = $(this)
    $this.validate({
      errorClass: 'text-danger',
      rules: {
        username: {
          required: true,
          ...
        }
        ...
      }
    })
  })

  $(wizardExample)
    .find('.btn-next')
    .each(function () {
      $(this).on('click', function (e) {
        var isValid = $(this).parent().siblings('form').valid()
        if (isValid) {
          numberedStepper.next()
        } else {
          e.preventDefault()
        }
      })
    })

  $(wizardExample)
    .find('.btn-prev')
    .on('click', function () {
      numberedStepper.previous()
    })

  $(wizardExample)
    .find('.btn-submit')
    .on('click', function () {
      var isValid = $(this).parent().siblings('form').valid()
      if (isValid) {
        alert('Submitted..!!')
      }
    })
}