Wizard Driven Form With Field Validation – zangdar

zangdar is a plain JavaScript library which turns long web form into a step-by-step wizard interface for better user experience.

More features:

• Auto validates form fields using native HTML validators.
• Works with 3rd form validation library.
• Custom styles for the wizard form.

How to use it:

Download and add the script into your document.

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

Create an empty html list to place the progress and steps.

<ul id="steps" class="step"></ul>

Split your web form into several sections using the data-step attribute.

<form id="zangdar-form">
  <section data-step="1">
    <label class="form-label" for="name">Name</label>
    <input type="text" id="name" name="name" class="form-input" required>
    <button data-next>Next</button>
  </section>
  <section data-step="2">
    <label class="form-label" for="email">Email</label>
      <input type="text" id="email" name="email" class="form-input" required>
      <button class="btn btn-link text-gray" data-prev>Previous</button>
      <button class="btn btn-primary float-right" data-next>Next</button>
  </section>
  <section data-step="3">
    <label class="form-label" for="genre">Select your gender</label>
    <select id="genre" name="genre" class="form-select" required>
      <option value="" disabled selected>Select</option>
      <option value="1">Male</option>
      <option value="2">Female</option>
      <option value="3">Other</option>
    </select>
    <button class="btn btn-link text-gray" data-prev>Previous</button>
    <button class="btn btn-primary float-right" type="submit">Send</button>
  </section>
</form>

Create the success message at the end of the form.

<div id="form-completed" class="form-completed">
  <p class="text-success">Form successfuly sent !</p>
</div>

Insert the necessary CSS styles into the page.

.zandgar__wizard .zandgar__step {
  display: none;
}
.zandgar__wizard .zandgar__step.zandgar__step__active {
  display: block;
}

Initialize the library on document ready.

document.addEventListener('DOMContentLoaded', () => {
  const wizard = new Zangdar('#zangdar-form')
})

Customize the selectors, CSS classes and activate step.

const wizard = new Zangdar('#zangdar-form',{
      // default selectors
      step_selector: '[data-step]',
      prev_step_selector: '[data-prev]',
      next_step_selector: '[data-next]',
      submit_selector: '[type="submit"]',
      // active step
      active_step_index: 0,
      // default classes
      classes: {
        form: 'zandgar__wizard',
        prev_button: 'zandgar__prev',
        next_button: 'zandgar__next',
        step: 'zandgar__step',
        step_active: 'zandgar__step__active',
      }
      
})

Event handlers.

const wizard = new Zangdar('#zangdar-form',{
      onSubmit(e) {
        // do something
      },
    
      onStepChange(step, oldStep, direction, form) {
        // on step change
      },
    
      onValidation(step, fields, form) {
        if (step.hasErrors()) {
          // ...
        }
      }
})

Add custom validator rules to the form.

const wizard = new Zangdar('#zangdar-form',{
      customValidation(step, fields, form) {
        // ...
      }
})

Changelog:

04/09/2020

• v1.3.4: refactor

04/08/2020

• v1.3.2: Add node entrypoint

04/06/2020

• v1.3.1: feat: ES2020 private methods refactor

03/30/2020

• v1.3.0

03/28/2020

• v1.0.30