123 lines
5.0 KiB
JavaScript
123 lines
5.0 KiB
JavaScript
jQuery(document).ready(function () {
|
|
|
|
// **------ click on next button **
|
|
jQuery(document).off('click', '.next-btn').on('click', '.next-btn', function () {
|
|
const $btn = jQuery(this);
|
|
const $formWizard = $btn.parents('.form-wizard');
|
|
const $parentFieldset = $btn.parents('.wizard-fieldset');
|
|
const $currentActiveStep = $formWizard.find('.form-wizard-steps .active');
|
|
const $currentActiveSteps = $formWizard.find('.vertica-wizard-steps .active');
|
|
let nextWizardStep = true;
|
|
|
|
$parentFieldset.find('.wizard-required').each(function () {
|
|
const $input = jQuery(this);
|
|
const value = $input.val();
|
|
const $error = $input.siblings(".wizard-form-error");
|
|
|
|
if (!value) {
|
|
$error.slideDown();
|
|
nextWizardStep = false;
|
|
} else {
|
|
$error.slideUp();
|
|
}
|
|
});
|
|
|
|
if (nextWizardStep) {
|
|
$parentFieldset.removeClass("show");
|
|
$parentFieldset.next('.wizard-fieldset').addClass("show");
|
|
|
|
$currentActiveStep.removeClass('active').addClass('activated').next().addClass('active');
|
|
$currentActiveSteps.removeClass('active').addClass('activated').next().addClass('active');
|
|
|
|
jQuery('.wizard-fieldset.show').each(function () {
|
|
const $fieldset = jQuery(this);
|
|
const formAttr = $fieldset.attr('data-tab-content');
|
|
|
|
jQuery('.form-wizard-steps .form-wizard-step-item').each(function () {
|
|
const $stepItem = jQuery(this);
|
|
const isCurrent = $stepItem.attr('data-attr') === formAttr;
|
|
$stepItem.toggleClass('active', isCurrent);
|
|
|
|
if (isCurrent) {
|
|
try {
|
|
const width = $stepItem.innerWidth();
|
|
const pos = $stepItem.position();
|
|
jQuery('.form-wizard-step-move').css({ left: pos.left, width });
|
|
} catch (err) {
|
|
console.warn("Positioning error:", err);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
// **------ click on previous button **
|
|
jQuery(document).off('click', '.pre-btn').on('click', '.pre-btn', function () {
|
|
const $btn = jQuery(this);
|
|
const $formWizard = $btn.parents('.form-wizard');
|
|
const $parentFieldset = $btn.parents('.wizard-fieldset');
|
|
const $currentActiveStep = $formWizard.find('.form-wizard-steps .active');
|
|
const $currentActiveSteps = $formWizard.find('.vertica-wizard-steps .active');
|
|
|
|
$parentFieldset.removeClass("show");
|
|
$parentFieldset.prev('.wizard-fieldset').addClass("show");
|
|
|
|
$currentActiveStep.removeClass('active').prev().removeClass('activated').addClass('active');
|
|
$currentActiveSteps.removeClass('active').prev().removeClass('activated').addClass('active');
|
|
|
|
jQuery('.wizard-fieldset.show').each(function () {
|
|
const $fieldset = jQuery(this);
|
|
const formAttr = $fieldset.attr('data-tab-content');
|
|
|
|
jQuery('.form-wizard-steps .form-wizard-step-item').each(function () {
|
|
const $stepItem = jQuery(this);
|
|
const isCurrent = $stepItem.attr('data-attr') === formAttr;
|
|
$stepItem.toggleClass('active', isCurrent);
|
|
|
|
if (isCurrent) {
|
|
try {
|
|
const width = $stepItem.innerWidth();
|
|
const pos = $stepItem.position();
|
|
jQuery('.form-wizard-step-move').css({ left: pos.left, width });
|
|
} catch (err) {
|
|
console.warn("Positioning error:", err);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// **------ click on form submit button **
|
|
jQuery(document).off('click', '.form-wizard .form-wizard-submit').on('click', '.form-wizard .form-wizard-submit', function () {
|
|
const $parentFieldset = jQuery(this).parents('.wizard-fieldset');
|
|
|
|
$parentFieldset.find('.wizard-required').each(function () {
|
|
const $input = jQuery(this);
|
|
const $error = $input.siblings(".wizard-form-error");
|
|
|
|
if (!$input.val()) {
|
|
$error.slideDown();
|
|
} else {
|
|
$error.slideUp();
|
|
}
|
|
});
|
|
});
|
|
|
|
// **------ input focus and blur **
|
|
jQuery(document).off('focus blur', '.form-control').on('focus blur', '.form-control', function (e) {
|
|
const $input = jQuery(this);
|
|
const value = $input.val();
|
|
const $parent = $input.parent();
|
|
const $error = $input.siblings('.wizard-form-error');
|
|
|
|
if (e.type === 'focus' || value !== '') {
|
|
$parent.addClass("focus-input");
|
|
$error.slideUp(300);
|
|
} else {
|
|
$parent.removeClass("focus-input");
|
|
$error.slideDown(300);
|
|
}
|
|
});
|
|
});
|