enchanter
enchanter copied to clipboard
Native JavaScript form wizard plugin for Bootstrap 5.
Enchanter
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.
How to use
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!
Callbacks and validations
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;
}
}
});
Is it stable?
Well... I've been using Enchanter for more than two years now on almost every form on the Sinaxys (my company) website.
How to help
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.