You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
3.6 KiB
132 lines
3.6 KiB
/*=========================================================================================
|
|
File Name: wizard-steps.js
|
|
Description: wizard steps page specific js
|
|
----------------------------------------------------------------------------------------
|
|
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
|
|
Version: 1.0
|
|
Author: PIXINVENT
|
|
Author URL: http://www.themeforest.net/user/pixinvent
|
|
==========================================================================================*/
|
|
|
|
// Wizard tabs with numbers setup
|
|
$(".number-tab-steps").steps({
|
|
headerTag: "h6",
|
|
bodyTag: "fieldset",
|
|
transitionEffect: "fade",
|
|
titleTemplate: '<span class="step">#index#</span> #title#',
|
|
labels: {
|
|
finish: 'Submit'
|
|
},
|
|
onFinished: function (event, currentIndex) {
|
|
alert("Form submitted.");
|
|
}
|
|
});
|
|
|
|
// Wizard tabs with icons setup
|
|
$(".icons-tab-steps").steps({
|
|
headerTag: "h6",
|
|
bodyTag: "fieldset",
|
|
transitionEffect: "fade",
|
|
titleTemplate: '<span class="step">#index#</span> #title#',
|
|
labels: {
|
|
finish: 'Submit'
|
|
},
|
|
onFinished: function (event, currentIndex) {
|
|
alert("Form submitted.");
|
|
}
|
|
});
|
|
|
|
// Vertical tabs form wizard setup
|
|
$(".vertical-tab-steps").steps({
|
|
headerTag: "h6",
|
|
bodyTag: "fieldset",
|
|
transitionEffect: "fade",
|
|
stepsOrientation: "vertical",
|
|
titleTemplate: '<span class="step">#index#</span> #title#',
|
|
labels: {
|
|
finish: 'Submit'
|
|
},
|
|
onFinished: function (event, currentIndex) {
|
|
alert("Form submitted.");
|
|
}
|
|
});
|
|
|
|
// Validate steps wizard
|
|
|
|
// Show form
|
|
var form = $(".steps-validation").show();
|
|
|
|
$(".steps-validation").steps({
|
|
headerTag: "h6",
|
|
bodyTag: "fieldset",
|
|
transitionEffect: "fade",
|
|
titleTemplate: '<span class="step">#index#</span> #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;
|
|
}
|
|
// 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();
|
|
},
|
|
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
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
// Initialize plugins
|
|
// ------------------------------
|
|
|
|
// Date & Time Range
|
|
$('.datetime').daterangepicker({
|
|
timePicker: true,
|
|
timePickerIncrement: 30,
|
|
locale: {
|
|
format: 'MM/DD/YYYY h:mm A'
|
|
}
|
|
}); |