Author: | betaWeb |
---|---|
Views Total: | 3,131 views |
Official Page: | Go to website |
Last Update: | April 9, 2020 |
License: | MIT |
Preview:

Description:
zangdar is a plain JavaScript library which turns long web form into a step-by-step wizard interface for better user experience.
More features:
- Auto validates form fields using native HTML validators.
- Works with 3rd form validation library.
- Custom styles for the wizard form.
How to use it:
Download and add the script into your document.
<script src="/path/to/zangdar.min.js"></script>
Create an empty html list to place the progress and steps.
<ul id="steps" class="step"></ul>
Split your web form into several sections using the data-step
attribute.
<form id="zangdar-form"> <section data-step="1"> <label class="form-label" for="name">Name</label> <input type="text" id="name" name="name" class="form-input" required> <button data-next>Next</button> </section> <section data-step="2"> <label class="form-label" for="email">Email</label> <input type="text" id="email" name="email" class="form-input" required> <button class="btn btn-link text-gray" data-prev>Previous</button> <button class="btn btn-primary float-right" data-next>Next</button> </section> <section data-step="3"> <label class="form-label" for="genre">Select your gender</label> <select id="genre" name="genre" class="form-select" required> <option value="" disabled selected>Select</option> <option value="1">Male</option> <option value="2">Female</option> <option value="3">Other</option> </select> <button class="btn btn-link text-gray" data-prev>Previous</button> <button class="btn btn-primary float-right" type="submit">Send</button> </section> </form>
Create the success message at the end of the form.
<div id="form-completed" class="form-completed"> <p class="text-success">Form successfuly sent !</p> </div>
Insert the necessary CSS styles into the page.
.zandgar__wizard .zandgar__step { display: none; } .zandgar__wizard .zandgar__step.zandgar__step__active { display: block; }
Initialize the library on document ready.
document.addEventListener('DOMContentLoaded', () => { const wizard = new Zangdar('#zangdar-form') })
Customize the selectors, CSS classes and activate step.
const wizard = new Zangdar('#zangdar-form',{ // default selectors step_selector: '[data-step]', prev_step_selector: '[data-prev]', next_step_selector: '[data-next]', submit_selector: '[type="submit"]', // active step active_step_index: 0, // default classes classes: { form: 'zandgar__wizard', prev_button: 'zandgar__prev', next_button: 'zandgar__next', step: 'zandgar__step', step_active: 'zandgar__step__active', } })
Event handlers.
const wizard = new Zangdar('#zangdar-form',{ onSubmit(e) { // do something }, onStepChange(step, oldStep, direction, form) { // on step change }, onValidation(step, fields, form) { if (step.hasErrors()) { // ... } } })
Add custom validator rules to the form.
const wizard = new Zangdar('#zangdar-form',{ customValidation(step, fields, form) { // ... } })
Changelog:
04/09/2020
- v1.3.4: refactor
04/08/2020
- v1.3.2: Add node entrypoint
04/06/2020
- v1.3.1: feat: ES2020 private methods refactor
03/30/2020
- v1.3.0
03/28/2020
- v1.0.30