...

Some quick example text to build on the card title and make up the bulk of the card's content.

Wizard

  1. Home
  2. Wizard

Basic Example

Keyboard

Try the keyboard navigation by clicking arrow left or right!

Effects

Pager

Custom Design Example

Personal Info
Job Status
Interview
Remark

Step wizard with validation

You can us the validation like what we did
Step 1
Step 2
Step 3
Step 4

Step wizard Vertical

Personal Info
Job Status
Interview
Remark

Basic Form Example

Account

(*) Mandatory

Profile

Hints

Finish

Advanced Form Example

Account

Account Information

(*) Mandatory

Profile

Warning

Finish

Dynamic Manipulation Example

Add Step




Add

(*) Mandatory

Insert Step

Remove Step

Vertical Steps Example

Keyboard

Try the keyboard navigation by clicking arrow left or right!

Effects

Pager

All Rights Reserved by Adminpro admin.
//Basic Example $("#example-basic").steps({ headerTag: "h3", bodyTag: "section", transitionEffect: "slideLeft", autoFocus: true, }); // Basic Example with form var form = $("#example-form"); form.validate({ errorPlacement: function errorPlacement(error, element) { element.before(error); }, rules: { confirm: { equalTo: "#password", }, }, }); form.children("div").steps({ headerTag: "h3", bodyTag: "section", transitionEffect: "slideLeft", onStepChanging: function (event, currentIndex, newIndex) { 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!"); }, }); // Advance Example var form = $("#example-advanced-form").show(); form .steps({ headerTag: "h3", bodyTag: "fieldset", transitionEffect: "slideLeft", onStepChanging: function (event, currentIndex, newIndex) { // Allways allow previous action even if the current form is not valid! if (currentIndex > newIndex) { return true; } // Forbid next action on "Warning" step if the user is to young if (newIndex === 3 && Number($("#age-2").val()) < 18) { return false; } // 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(); }, onStepChanged: function (event, currentIndex, priorIndex) { // Used to skip the "Warning" step if the user is old enough. if (currentIndex === 2 && Number($("#age-2").val()) >= 18) { form.steps("next"); } // Used to skip the "Warning" step if the user is old enough and wants to the previous step. if (currentIndex === 2 && priorIndex === 3) { form.steps("previous"); } }, onFinishing: function (event, currentIndex) { form.validate().settings.ignore = ":disabled"; return form.valid(); }, onFinished: function (event, currentIndex) { alert("Submitted!"); }, }) .validate({ errorPlacement: function errorPlacement(error, element) { element.before(error); }, rules: { confirm: { equalTo: "#password-2", }, }, }); // Dynamic Manipulation $("#example-manipulation").steps({ headerTag: "h3", bodyTag: "section", enableAllSteps: true, enablePagination: false, }); //Vertical Steps $("#example-vertical").steps({ headerTag: "h3", bodyTag: "section", transitionEffect: "slideLeft", stepsOrientation: "vertical", }); //Custom design form example $(".tab-wizard").steps({ headerTag: "h6", bodyTag: "section", transitionEffect: "fade", titleTemplate: '#index# #title#', labels: { finish: "Submit", }, onFinished: function (event, currentIndex) { swal( "Form Submitted!", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem erat eleifend ex semper, lobortis purus sed." ); }, }); var form = $(".validation-wizard").show(); $(".validation-wizard").steps({ headerTag: "h6", bodyTag: "section", transitionEffect: "fade", titleTemplate: '#index# #title#', labels: { finish: "Submit", }, onStepChanging: function (event, currentIndex, newIndex) { return ( currentIndex > newIndex || (!(3 === newIndex && Number($("#age-2").val()) < 18) && (currentIndex < newIndex && (form.find(".body:eq(" + newIndex + ") label.error").remove(), form .find(".body:eq(" + newIndex + ") .error") .removeClass("error")), (form.validate().settings.ignore = ":disabled,:hidden"), form.valid())) ); }, onFinishing: function (event, currentIndex) { return (form.validate().settings.ignore = ":disabled"), form.valid(); }, onFinished: function (event, currentIndex) { swal( "Form Submitted!", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem erat eleifend ex semper, lobortis purus sed." ); }, }), $(".validation-wizard").validate({ ignore: "input[type=hidden]", errorClass: "text-danger", successClass: "text-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: !0, }, }, });