Enchanter is a native form wizard plugin for Bootstrap 5.

Bootstrap version 5 is on air, and since Bootstrap 5 no longer has jQuery as a dependency, this is a plugin made from scratch using vanilla JavaScript.

Your <form> tag should wrap the .nav and .tab-content elements. The footer of the form must contain "Back", "Next" and "Finish" buttons with the data-enchanter attributes, as shown below:

<form action="" method="post" id="registration">
  <!-- The tab bar -->
  <nav>
    <div class="nav nav-pills nav-fill" id="nav-tab">
      <a class="nav-link active" id="step1-tab" data-bs-toggle="tab" href="#step1">Step 1</a>
      <a class="nav-link" id="step2-tab" data-bs-toggle="tab" href="#step2">Step 2</a>
      <a class="nav-link" id="step3-tab" data-bs-toggle="tab" href="#step3">Step 3</a>
    </div>
  </nav>
  <!-- The content -->
  <div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="step1">
      Page 1
    </div>
    <div class="tab-pane fade" id="step2">
      Page 2
    </div>
    <div class="tab-pane fade" id="step3">
      Page 3
    </div>
  </div>
  <!-- The buttons -->
  <button type="button" class="btn btn-secondary" data-enchanter="previous">Previous</button>
  <button type="button" class="btn btn-primary" data-enchanter="next">Next</button>
  <button type="submit" class="btn btn-primary" data-enchanter="finish">Finish</button>
</form>

Within the <script> tag, just declare the class by passing the form ID as a parameter:

// "registration" is the <form> ID
const enchanter = new Enchanter('registration');

And that's all!

Enchanter has support for callbacks, it means you can use onNext and onPrevious for validations, for example. Our sample uses jQuery Validation for this (yeah, I know, jQuery), but my goal for the future is to create an embedded validation system that works the same way our sample does.

const wizard = new Enchanter('registration', {}, {
  onNext: () => {
    if (!registrationForm.valid()) {
      formValidate.focusInvalid();
      return false;
    }
  }
});

Well... I've been using Enchanter for more than two years now on almost every form on the Sinaxys (my company) website.

We have some improvements in progress, if you want to help:

• Overwrite default options with new Enchanter('form_id', { option1: 'value', option2: 'value' });.
• Get rid of jquery-validation and implement out-of-the-box BS5-compatible form validation in each step.
• Add option to disable clicks on .nav-link in case button clicks are mandatory.