Dialog Start tour

eWizard

Basic wizard, wich transforms fieldsets into steps. This wizard has a validation engine. The validation is the same as the eContactForm plugin.

How to use

How to use HTML elements.

Markup
<div class="e-wizard">
    <header>
        <h2>Welcome</h2>                                                    
    </header>
    <ul class="e-wizard-steps e-wizard-numbers">
        <li class="e-wizard-step">
            <span>1</span>
            <h3>Welcome</h3>
            <h5>The first step</h5>
        </li>
        <li class="e-wizard-step">
            <span>2</span>
            <h3>Next step</h3>
            <h5>More stuff to do</h5>
        </li> 
        <li class="e-wizard-step">
            <span>3</span>
            <h3>Almost there</h3>
            <h5>Some more fields to fill</h5>
        </li>
        <li class="e-wizard-step">
            <span>4</span>
            <h3>Last step</h3>
            <h5>Where done for now</h5>
        </li> 
    </ul>
    <div class="e-wizard-placeholder">

        <form id="basic-wizard">
        
            <fieldset> stuff goes here <fieldset/>
            <fieldset> stuff goes here <fieldset/>
            <fieldset> stuff goes here <fieldset/>
            <fieldset> stuff goes here <fieldset/>
        
        <form/>
    <div/>
<div/>

Usage Data Atributes (dataset)

Data atrributes are used by some of our custom plugins to set/get data.

HTML5 data attributes Element Example Desctription Since
data-validation-type input present | url | email | numbers | date | letters | regex | password | match | ip These are the validation types: present: checks if the field has any data(min en max can be set separately), url: checks for a valid url, email: checks for a valid email, date: checks for a valid date(00-00-0000), letters: allows only letters, regex: can be used if you want to check for a custom pattern, password: checks if both password are the same, match: can be used to validate a custom word or string or such, this is the same as the regex validation type, ip: checks for a valid ip adddress(255.255.255.255). 1.0
data-validation-label input This is used for the error indication text, if the field isn't valid you can set you own custom text, if u dont use this custom label it will use a default line, which you can set in the plugin options. 1.0
data-validation-minimum input This is the minimum value that has to be present. This is used in combination with the present, letters, numbers and password validation type(s). Default is 0. 1.0
data-validation-maximum input This is the maximum value that can be present. This is used in combination with the present, letters, numbers and password validation type(s). 1.0
data-validation-match input This can be used to validate a field with a fixed value. This is used in combination with the match validation type. 1.0
data-validation-regex input This can be used to validate a field with custom regex pattern. This is used in combination with the regex validation type. 1.0

Usage plugin

How to use our custom made jQuery plugins.

Markup
$('#basic-wizard').eWizard({
    showProgressbar: true,
    nextLabel: 'next',
    prevLabel: 'prev',
    buttonNavigation: true,
    stepNavigation: true,
    labelError: 'This field is required!',
    onSwitch: function(){ },	
    onSubmit: function(){ }		
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Since
showProgressbar boolean true Show a simple progressbar in the header of the wizard. 1.0
nextLabel string Next Next button label. 1.0
prevLabel string Prev Previous button label. 1.0
buttonNavigation boolean true Show a prev and next button in the footer of the wizard. 1.0
stepNavigation boolean true Navigate true the steps by clicking on the steps titles. 1.0
labelError string This field is required! Default valdidation message. 1.0
onSwitch function function(){} Callback function that runs if a user goes to the next/prev step. 1.0
onSubmit function function(){} Callback function that runs at the end once a user clicks on the submit button. 1.0

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: $.fn.pluginName.key = 'value';