Basically, I need to validate data when the "Next" button is clicked, but if the user wants to go back I do not want to validate if they have introduced the required fields for the current step
$('#wizard').smartWizard({ onLeaveStep: leaveAStepCallback,
onFinish: onFinishCallback
});
function leaveAStepCallback(obj) {
var step_num = obj.attr('rel'); // get the current step number
return validateSteps(step_num); // return false to stay on step and true to continue navigation
}
function onFinishCallback() {
if (validateAllSteps()) {
$('form').submit();
}
}
// Your Step validation logic
function validateSteps(stepnumber) {
var isStepValid = true;
if (stepnumber == 1) {
var e = document.getElementById("ContentPlaceHolder1_DropDownCustomers");
var strCustomer = e.options[e.selectedIndex].value;
if (strCustomer == "-1") {
//alert("Please select a Customer.");
$('#wizard').smartWizard('showMessage', 'Please select a Customer.');
isStepValid = false;
return isStepValid;
}
else {
var d = document.getElementById("ContentPlaceHolder1_DropDownTemplates");
var strTemplate = d.options[d.selectedIndex].value;
if (strTemplate == "-1") {
alert("Please select a Template.");
isStepValid = false;
return isStepValid;
}
else {
return isStepValid;
}
return isStepValid;
}
}
if (stepnumber == 2) {
if (document.getElementById("ContentPlaceHolder1_LabelMainDestData") != null) {
isStepValid = true;
}
else {
alert("Please introduce the Main Destination.");
isStepValid = false;
}
return isStepValid;
}
if (stepnumber == 3) {
isStepValid = true;
return isStepValid;
}
}
in showStep function just edit
if(stepIdx != curStepIdx)
to
if(stepIdx > curStepIdx)
it will resolve your problem