Form Wizards

Step wizard

You can find the offical website
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

You can find the offical website
Personal Info
Job Status
Interview
Remark
//Custom design form example $(".tab-wizard").steps({ headerTag: "h6", bodyTag: "section", transitionEffect: "fade", titleTemplate: '#index# #title#', labels: { finish: "Submit" }, onFinished: function (event, currentIndex) { Swal.fire("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.fire("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 } } })