zangdar
A JavaScript class to simply generate and handle HTML form wizards.
You can find a very simple demo at this link, and the API here.
Getting started
Installation
To install Zangdar, you just have to download zangdar.min.js
in the dist
folder and add a script into your HTML page :
<script src="path/to/zangdar.min.js"></script>
Your have to add this basic CSS to your styles too :
.zandgar__wizard .zandgar__step {
display: none;
}
.zandgar__wizard .zandgar__step.zandgar__step__active {
display: block;
}
Basic usage
Here a basic HTML form with sections to separate wizard parts :
<form id="my-form">
<section data-step="coords">
<input type="text" name="name" placeholder="Your name here...">
<input type="text" name="email" placeholder="Your email here...">
<button data-next>Next</button>
</section>
<section data-step="security">
<input type="password" name="password" placeholder="Your password here...">
<input type="password" name="password_confirm" placeholder="Confirm your password here...">
<button data-prev>Previous</button>
<button data-next>Next</button>
</section>
<section data-step="personal">
<input type="date" name="birthdate" placeholder="Your birthdate...">
<input type="text" name="addresss" placeholder="Your address here...">
<input type="number" name="zipcode" placeholder="Your zipcode here...">
<input type="text" name="city" placeholder="Your city here...">
<button data-prev>Previous</button>
<button type="submit">Send</button>
</section>
</form>
And you just have to instanciate Zandgar with the selector of the form you wan't to handle :
document.addEventListener('DOMContentLoaded', () => {
const wizard = new Zangdar('#my-form')
})
And.. voilĂ ! You have a fully functional wizard ! :)
Options & Events
You can pass an object of options as second class parameter. This is very useful, especially for adding events to the wizard lifecycle.
List of properties here :
Name | Type | Default | Description |
---|---|---|---|
step_selector | String | [data-step] |
Wizard step section selector |
prev_step_selector | String | [data-prev] |
Wizard step previous button (or any element) selector |
prev_step_selector | String | [data-next] |
Wizard step next button (or any element) selector |
submit_selector | String | [type="submit"] |
Wizard form submit button selector |
active_step_index | Number | 0 |
Wizard active step index (useful to define active step on wizard instanciation) |
classes.form | String | zandgar__wizard |
Wizard form CSS class |
classes.prev_button | String | zandgar__prev |
Wizard previous button (or any element) CSS class |
classes.next_button | String | zandgar__next |
Wizard next button (or any element) CSS class |
classes.step | String | zandgar__step |
Wizard step section CSS class |
classes.step_active | String | zandgar__step__active |
Wizard active step section CSS class |
List of events here :
Name | Type | Default | Parameters | Description |
---|---|---|---|---|
onSubmit | Function | null |
{Event} e |
Wizard form custom submit handler (see example below) |
onStepChange | Function | null |
{WizardStep} step {Object} oldStep {Number} direction {HTMLFormElement} form |
method triggered when a step changes (see example below) |
onValidation | Function | null |
{WizardStep} step {NodeListOf} fields {HTMLFormElement} form |
method triggered on wizard step HTML validation (see example below) |
customValidation | Function | null |
{WizardStep} step {NodeListOf} fields {HTMLFormElement} form |
method triggered on wizard step HTML validation (see example below) |
Here there are examples for the events listed above :
const wizard = new Zangdar('#my-form', {
onSubmit(e) {
e.preventDefault()
// Ajax call, custom form processing or anything you wan't to do here...
return false
},
onStepChange(step, oldStep, direction, form) {
const breadcrumb = this.getBreadcrumb() // this refers to Zangdar form wizard instance
},
onValidation(step, fields, form) {
if (step.hasErrors()) {
// ...
}
// Here a treatment after HTML native validation...
},
customValidation(step, fields, form) {
// Use the Formr library to validate fields (https://github.com/betaWeb/formr)
const validator = new Formr(form)
if (step.labeled('...')) {
validator
.required('name', 'email', 'password', 'confirm_password')
.string('name', 'email', 'password', 'confirm_password')
.email('email')
.length('password', 3, 20)
.length('confirm_password', 3, 20)
.same('password', 'confirm_password')
.validateAll()
if (!validator.isValid()) {
// ...
return false
}
return true
}
//...
}
})