Wizard & Validation

Wizard

SmartWizard plugin in included Ace's demo.
There's a v5 upgrade available but we are still using v4 because it works well and is stable.

The plugin has different styles for wizard steps but currently Ace only supports "Circles" style that looks like the wizard in older versions of Ace.

The styling is done inside plugins/wizard.scss .

You should also include the following before ace.css:

smartwizard/dist/css/smart_wizard.min.css
smartwizard/dist/css/smart_wizard_theme_circles.min.css

Syntax

The html is like this:

html

<div id="mywizard">
  <ul class="mx-auto">
    <li>
      <a href="#step-1">
       <span class="step-title">
        <!-- show this when we are before or inside this step -->
        1
       </span>

       <span class="step-title-done">
        <!-- show this when we are after this step -->
        <i class="fa fa-check text-success-m1"></i>
       </span>
      </a>
      <span class="step-description">
        Step 1
      </span>
    </li>

    <li>
      ...
    </li>
  </ul>
</div>

If you want the animated progressbar, you should add a li.wizard-progressbar and use javascript to dynamically set its width:

html

<div id="mywizard">
  <ul class="mx-auto">
    <li class="wizard-progressbar"></li>

    <li>
      <a href="#step-1">
      ...
      </a>
    </li>

    ...
  </ul>
</div>

var stepCount = $('#mywizard').find('li > a').length
var left = (100 / (stepCount * 2))
$('#mywizard').find('.wizard-progressbar').css( {left: left+'%', right: left+'%'} )

$('#mywizard').smartWizard({
  ...
  .on("showStep", function(e, anchorObject, stepNumber, stepDirection) {
    var progress = parseInt((stepNumber + 1) * 100 / stepCount)

    var halfStepWidth = parseInt(100 / stepCount) / 2
    progress -= halfStepWidth;//because for example for the first step, we don't want progressbar to move all the way to next step

    $('#mywizard').find('.wizard-progressbar').css('max-width', progress+'%')
  }
})

Custom colors

You can have custom color for each step by specifying a "brc-" class for the "LI" element.
Progress bar can be colored using "bgc-" classes.

html

  <li class="wizard-progressbar bgc-green"></li>

  <li class="brc-green-d1">
    <a href="#step-1">
    ...
    </a>
  </li>

Validation

You can use HTML5's built-in validation or a plugin

HTML5

$('#mywizard")
.on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
  if (stepNumber == 0 && stepDirection == 'forward')  {
    var form = document.getElementById('validation-form');
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();

      form.classList.add('was-validated');
      return false;
    }
  }
})

This adds Bootstrap's custom styling to form elements depending on their valid/invalid status

Plugin

I've used jQuery Validation Plugin in this demo. Please refer to its documentation for more info and see views/pages/form-wizard/@page-script.js for an example.

The important functions are highlight , success and errorPlacement in which you decide how to display error/success messages.