Native JS form wizard plugin for Bootstrap 5
npm install @bpleffken/enchanterEnchanter is a lightweight vanilla JS form wizard plugin for Bootstrap 5 — with no dependencies!
!Screenshot 2022-12-02 at 10-41-46 Enchanter
Add Enchanter to your package.json:
``
npm install @bpleffken/enchanter
Create your form with three main components:
Step 1: Create the navigation tabs
`html`
Step 2: Add your form content using the tab-pane classes
`html`
Step 3: Add navigation buttons
`html`
Complete Example:
`html
`
Add this to your JavaScript file:
`js`
// Pass the form's ID attribute as a parameter
const enchanter = new Enchanter('registration');
That's it! Your form wizard is now ready to use.
Validate form data before moving to the next step using the onNext callback:
`js`
const wizard = new Enchanter('registration', {}, {
onNext: () => {
// Perform validation here
if (!formIsValid()) {
return false; // Stay on current step
}
return true; // Proceed to next step
}
});
Example with jQuery Validation Plugin:
> ⚠️ This example requires jQuery and jQuery Validation plugin to be installed.
`js`
const wizard = new Enchanter('registration', {}, {
onNext: () => {
if (!$('#registration').valid()) {
return false;
}
}
});
Hide the step tabs to prevent direct navigation between steps:
`js`
// Pass the form ID as the first parameter
const wizard = new Enchanter('registration', {
hideNav: true
});
Use this if you want to:
- Enforce sequential step navigation
- Implement a custom progress bar
- Create a custom title display
Enchanter is battle-tested and production-ready. It has been actively used in production for 4+ years across mission-critical applications:
- Sinaxys — A healthcare platform handling sensitive data and medical workflows;
- ContaExpert — An accounting software managing financial records, employees and payrolls for thousands of businesses.
The codebase is stable, well-maintained, and trusted by companies processing real, mission-critical business data every single day.
I'm planning these improvements:
- [ ] Merge default options with user options: new Enchanter('form_id', { option1: 'value', option2: 'value' })
- [ ] Built-in form validation without external plugins
- [ ] Option to disable direct clicks on
Found a bug? Have a suggestion? I'd love to hear from you! Feel free to open an issue or contribute to the project.
Are you using Enchanter? Let me know on GitHub!