I’m using FormValidation and a bootstrap stepper function.
This is my code function:
var StepperDocumenti = function () {
// Elements
var stepper;
var form;
var formSubmitButton;
var formContinueButton;
// Variables
var stepperObj;
var validations = [];
// Private Functions
var initStepper = function () {
// Initialize Stepper
stepperObj = new KTStepper(stepper);
// Validation before going to next page
stepperObj.on('kt.stepper.next', function (stepper) {
console.log('stepper.next ' + stepper.getCurrentStepIndex());
// Validate form before change stepper step
var validator = validations[stepper.getCurrentStepIndex() - 1]; // get validator for current step
if (validator) {
validator.validate().then(function (status) {
console.log('validazione step: ' + status);
if (status == 'Valid') {
stepper.goNext();
KTUtil.scrollTop();
} else {
Swal.fire({
text: "Alcuni campi obbligatori non sono stati compilati correttamente, controllare.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "OK!",
customClass: {
confirmButton: "btn btn-light"
}
}).then(function () {
KTUtil.scrollTop();
});
}
});
} else {
stepper.goNext();
KTUtil.scrollTop();
}
});
// Prev event
stepperObj.on('kt.stepper.previous', function (stepper) {
console.log('stepper.previous');
stepper.goPrevious();
KTUtil.scrollTop();
});
}
var handleForm = function () {
formSubmitButton.addEventListener('click', function (e) {
// Validate form before change stepper step
var validator = validations[2]; // get validator for last form
validator.validate().then(function (status) {
console.log('validated form: ' + status);
if (status == 'Valid') {
// Prevent default button action
e.preventDefault();
// Disable button to avoid multiple click
formSubmitButton.disabled = true;
// Show loading indication
formSubmitButton.setAttribute('data-kt-indicator', 'on');
// Simulate form submission
setTimeout(function () {
// Hide loading indication
formSubmitButton.removeAttribute('data-kt-indicator');
// Enable button
formSubmitButton.disabled = false;
form.submit();
}, 1000);
} else {
Swal.fire({
text: "Alcuni campi obbligatori non sono stati compilati correttamente, controllare.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok!",
customClass: {
confirmButton: "btn btn-light"
}
}).then(function () {
KTUtil.scrollTop();
});
}
});
});
}
var initValidation = function () {
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
// Step 1
validations.push(FormValidation.formValidation(
form,
{
fields: {
'anno': {
validators: {
notEmpty: {
message: 'L'anno è obbligatorio'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
));
// Step 2
validations.push(FormValidation.formValidation(
form,
{
fields: {
'id_um': {
validators: {
notEmpty: {
enable: false,
message: 'L'unità di misura è obbligatoria'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
// Bootstrap Framework Integration
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
));
}
return {
// Public Functions
init: function () {
stepper = document.querySelector('#documenti_stepper');
if (!stepper) {
return;
}
form = stepper.querySelector('#form_documenti');
formSubmitButton = stepper.querySelector('[data-kt-stepper-action="submit"]');
formContinueButton = stepper.querySelector('[data-kt-stepper-action="next"]');
initStepper();
initValidation();
handleForm();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
StepperDocumenti.init();
});
I want to add a control that, when the select “tipo_riga” changes, performs follow check and enables or disables validation of field “id_um”
var tipo = $('[name="tipo_riga"]').val();
if (tipo == 'D') {
validator.disableValidator('id_um');
} else if (tipo == 'C') {
validator.disableValidator('id_um');
}
But I can’t figure out how to insert this control. If I have to create an external function or if I can insert a control inside the function itself that controls the change of the select.
New contributor
Daniele Maffei is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.