Form Wizard UI With Step Navigation – Wizard-JS

Preview:

Description:

A Vanilla JavaScript library that converts form groups into a user-friendly wizard UI with field validation integrated.

How to use it:

1. Create a step navbar that indicates the current step you are in a wizard process.

<section class="wizard">
  <aside class="wizard-nav">
    <div class="wizard-step" data-type="form">
      <span class="dot"></span>
      <span>Notification</span>
    </div>
    <div class="wizard-step" data-type="form">
      <span class="dot"></span>
      <span>Style and content</span>
    </div>
    <div class="wizard-step" data-type="form">
      <span class="dot"></span>
      <span>Destiny</span>
    </div>
    <div class="wizard-step" data-type="form">
      <span class="dot"></span>
      <span>Last Step</span>
    </div>
  </aside>
</section>

2. Add form groups as steps to the wizard.

<section class="wizard">
  <aside class="wizard-nav">
    <div class="wizard-step" data-type="form">
      <span class="dot"></span>
      <span>Notification</span>
    </div>
    <div class="wizard-step" data-type="form">
      <span class="dot"></span>
      <span>Style and content</span>
    </div>
    <div class="wizard-step" data-type="form">
      <span class="dot"></span>
      <span>Destiny</span>
    </div>
    <div class="wizard-step" data-type="form">
      <span class="dot"></span>
      <span>Last Step</span>
    </div>
  </aside>
  <aside class="wizard-content container">
    <div class="wizard-step">
      <div class="form-group">
        <label for="nameCampaign">Campaign name</label>
        <input type="text" name="name" class="form-control required" id="nameCampaign" placeholder="Enter a short campaign name">
      </div>
      <div class="form-group">
        <label for="descCampaign">Description of the campaign</label>
        <textarea name="description" class="form-control" id="descCampaign"></textarea>
      </div>
    </div>
    <div class="wizard-step">
        <div class="form-group">
          <label for="titleNoti">Title</label>
          <input type="text" name="title" class="form-control required banner-info" id="titleNoti"
              placeholder="Example: Message title">
        </div>
        <div class="form-group">
          <label for="bodyNoti">Body</label>
          <input type="text" name="body" class="form-control required banner-info" id="bodyNoti" placeholder="Example: Message body">
        </div>
        <div class="form-group">
          <label for="imageNoti">Image</label>
          <input type="file" name="image" class="form-control banner-info" id="imageNoti">
        </div>
    </div>
    <div class="wizard-step">
        <div class="form-group">
          <label for="titleNoti">Action</label>
          <select class="form-control" name="action">
            <option value="">Select one ...</option>
            <option value="0">Open bolus configurator</option>
          </select>
        </div>
        <div class="form-group">
          <label for="bodyNoti">Segment</label>
          <select class="form-control required fetch-info" name="segment">
            <option value="">Select one ...</option>
            <option value="0">País</option>
            <option value="1">Language</option>
            <option value="2">Diabetes Type</option>
            <option value="3">Center</option>
          </select>
        </div>
    </div>
    <div class="wizard-step">
      <div class="form-group">
        <label for="titleNoti">Action</label>
        <textarea class="form-control required fetch-info">🍍</textarea>>
      </div>
    </div>
  </aside>
</section>

3. Load the main JavaScript and Stylesheet.

<link rel="stylesheet" href="./styles/css/main.css" />
<script src="./src/wizard.js"></script>

4. Initialize the Wizard and done.

const wizard = new Wizard(args);
wizard.init();

5. All available wizard options.

const wizard = new Wizard({
      // Default CSS classes
      wz_class: ".wizard",
      wz_ori: '.horizontal',
      wz_nav: ".wizard-nav",
      wz_nav_style: "dots", // or 'progress'
      wz_content: ".wizard-content",
      wz_buttons: ".wizard-buttons",
      wz_button: ".wizard-btn",
      wz_step: ".wizard-step",
      wz_form: ".wizard-form",
      wz_next: ".next",
      wz_prev: ".prev",
      wz_finish: ".finish",
      // Current step. 0 = Step 1
      current_step: 0,
      // Number of steps
      steps: 0,
      // 'all', 'nav', or 'buttons'
      navigation: "all",
      // Show buttons
      buttons: true,
      // Custom lable text
      next: "Next",
      prev: "Prev",
      finish: "Submit",
});

6. Reset & lock the wizard.

// reset
wizard.reset();
// lock/unlock
wizard.lock();

7. Events.

document.addEventListener("prevWizard", function (e) {
  alert("Prev Step");
});
document.addEventListener("nextWizard", function (e) {
  alert("Next Step");
});
document.addEventListener("submitWizard", function (e) {
  alert("Form Submit");
});
document.addEventListener("endWizard", function (e) {
  alert("Wizard is finished");
});
document.addEventListener("resetWizard", function (e) {
  alert("Wizard has restarted");
});
document.addEventListener("lockWizard", function (e) {
  alert("Wizard is locked");
});
document.addEventListener("unlockWizard", function (e) {
  alert("Wizard is unlocked");
});

Changelog:

v1.7.6 (03/11/2022)

• Add lock and reset mode

v1.7.1 (03/09/2022)

• All bugs have been fixed.
• Now the nav is generated automatically.
• Add new options.

v1.6 (02/03/2022)

• Fix column mode responsive
• Field fixes and column layout added