Author: | AdrianVillamayor |
---|---|
Views Total: | 139 views |
Official Page: | Go to website |
Last Update: | January 13, 2023 |
License: | MIT |
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.
wizard.addEventListener("prevWizard", function (e) { alert("Prev Step"); }); wizard.addEventListener("nextWizard", function (e) { alert("Next Step"); }); wizard.addEventListener("submitWizard", function (e) { alert("Form Submit"); }); wizard.addEventListener("endWizard", function (e) { alert("Wizard is finished"); }); wizard.addEventListener("resetWizard", function (e) { alert("Wizard has restarted"); }); wizard.addEventListener("lockWizard", function (e) { alert("Wizard is locked"); }); wizard.addEventListener("unlockWizard", function (e) { alert("Wizard is unlocked"); }); wizard.addEventListener("errorFormValidatorWizard", function (e) { alert("Some required field is empty or incorrectly formatted."); });
Changelog:
v1.9.3 (01/13/2023)
- Error correction with the priorities
- A CustomEvent has been added to identify when the wizard is fully generated and loaded
- The variable system of the code has been updated, and all variables declared with var
- A control has been added so that the invocation of the same wizard cannot be repeated
- The URL and email validation system has been changed to avoid ReDOS
- A small bug has been fixed in which when changing backward step in a form with validation, an error occurred if this was not completed
v1.9.1 (12/17/2022)
- If you add the option buttons:false all buttons will be hidden, including Send/Finish.
- The navigation: “nav” option will continue to have the Send/Finish button unless buttons:false is used.
v1.9.0 (12/15/2022)
- Events have been added for navbar navigation
- Bugs fixed
v1.8 (08/04/2022)
- Now the event management is handled by the same wizard, instead of documents. Allowing better control with multiple and single wizards.
- New event errorFormValidatorWizard .
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