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-linkin case button clicks are mandatory.