jQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces. This plugin groups content into sections for a more structured and orderly page view.
1. Initialize the plugin by referencing the necessary files:
// vendor js
<script src="jquery.steps.min.js"></script>
// template css
<link rel="stylesheet" type="text/css" href="wizard.css">
Note!
If you want to add extra components, then you have to add js/css files accordingly.
Refer following links for detailed documentation, configuration options, methods and examples:
Type | URL |
---|---|
Plugin Link | http://www.jquery-steps.com/Examples |
Find Form Wizard style options below :
Wizard style options | Class | Description |
---|---|---|
Wizard Circle | .wizard-circle |
Use this class for circle style wizard steps. |
Wizard Circle with Icon | .step-icon |
Use this class for circle style wizard steps with icons. |
Wizard with Validation | .required |
Use this class for validting wizard steps. |
Add .wizard-circle
class to form tag to apply circle style wizard steps. This is the default style with circle wizard steps.
To add icons to step instead of number use .step-icon
class along with icon.
1. HTML Markup:
<form action="#" class="icons-tab-steps wizard-circle">
<h6><i class="step-icon feather icon-home"></i> Step 1</h6>
<fieldset>
<div class="form-group">
<label for="fullName">Full Name :</label>
<input type="text" class="form-control" id="fullName" >
</div>
</fieldset>
<h6><i class="step-icon feather icon-briefcase"></i>Step 2</h6>
<fieldset>
<div class="form-group">
<label for="emailAddress">Email Address :</label>
<input type="email" class="form-control" id="emailAddress" >
</div>
</fieldset>
</form>
2. Javascript.
// Wizard tabs with icons setup
$(".icons-tab-steps").steps({
headerTag: "h6",
bodyTag: "fieldset",
transitionEffect: "fade",
titleTemplate: '#index# #title#',
labels: {
finish: 'Submit'
},
onFinished: function (event, currentIndex) {
alert("Form submitted.");
}
});
Add class .required
to form fields order to validate form wizard steps.
1. Initialize the plugin by referencing the necessary files:
<script src="jquery.steps.min.js"></script>
<script src="jquery.validate.min.js"></script>
<link rel="stylesheet" type="text/css" href="wizard.css">
2. HTML Markup:
<form action="#" class="steps-validation wizard-circle">
<h6><i class="step-icon feather icon-home"></i> Step 1</h6>
<fieldset>
<div class="form-group">
<label for="fullName">Full Name :</label>
<input type="text" class="form-control required" id="fullName" >
</div>
</fieldset>
<h6><i class="step-icon feather icon-briefcase"></i>Step 2</h6>
<fieldset>
<div class="form-group">
<label for="emailAddress">Email Address :</label>
<input type="email" class="form-control required" id="emailAddress" >
</div>
</fieldset>
</form>
3. Javascript.
// Validate steps wizard
// Show form
var form = $(".steps-validation").show();
$(".steps-validation").steps({
headerTag: "h6",
bodyTag: "fieldset",
transitionEffect: "fade",
titleTemplate: '#index# #title#',
labels: {
finish: 'Submit'
},
onStepChanging: function (event, currentIndex, newIndex) {
// Allways allow previous action even if the current form is not valid!
if (currentIndex > newIndex) {
return true;
}
// Needed in some cases if the user went back (clean up)
if (currentIndex < newIndex) {
// To remove error styles
form.find(".body:eq(" + newIndex + ") label.error").remove();
form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
}
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid();
},
onFinishing: function (event, currentIndex) {
form.validate().settings.ignore = ":disabled";
return form.valid();
},
onFinished: function (event, currentIndex) {
alert("Submitted!");
}
});
// Initialize validation
$(".steps-validation").validate({
ignore: 'input[type=hidden]', // ignore hidden fields
errorClass: 'danger',
successClass: 'success',
highlight: function (element, errorClass) {
$(element).removeClass(errorClass);
},
unhighlight: function (element, errorClass) {
$(element).removeClass(errorClass);
},
errorPlacement: function (error, element) {
error.insertAfter(element);
},
rules: {
email: {
email: true
}
}
});