jQuery - SmartWizard. How can I override "Previous" button validation?
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.");
i开发者_如何转开发sStepValid = 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
Create a new var:
var OO_Back = false;
Then add "OO_Back = true" when clicked back button:
$($this.buttons.previous).click(function() {
OO_Back = true;
$this.goBackward();
return false;
});
And last modify this condition to check y back button is clicked, you must set OO_Back = false after that:
var curStep = $this.steps.eq($this.curStepIdx);
if(stepIdx != $this.curStepIdx){
if($.isFunction($this.options.onLeaveStep) && OO_Back == false) {
var context = { fromStep: $this.curStepIdx+1, toStep: stepIdx+1 };
if (! $this.options.onLeaveStep.call($this,$(curStep), context)){
return false;
}
}
}
OO_Back = false;
just create another jsp page with case on step_number property which you can get from request and inside that jsp include your jsp according your step_number and assign that newly created jsp in your contentURL
Example
//inside your wizard page.
contentURL:'wizardcontent.jsp',
//'wizardcontent.jsp' is as follow
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
int step_number = Integer.parseInt(request.getParameter("step_number")!=null?request.getParameter("step_number"):"1");
String url = "";
switch (step_number){
case 1:%>
<jsp:include page="ddd.jsp"></jsp:include>
<%break;
case 2:%>
<jsp:include page="xyz.jsp"></jsp:include>
<%break;
case 3:%>
<jsp:include page="abcd.jsp"></jsp:include>
<%break;
}
%>
Maybe this can help:
$('.buttonPrevious').click(function () {
// set true validation if you need
return false;
});
You must set valid true on back button if you need.
Try this for cancelled leaveAStepCallback function.
$('#yourwizard').unbind('leaveAStepCallback');
If it won't work check out stopImmediatePropagation.
I used the following and it worked perfectly that is being guided by the accepted answer above.
onLeaveStep: function(obj, context){
if(context.toStep > context.fromStep){ ...}
}
This worked for me when I used it:
function leaveStep(oStep, context) {
//don't validate if the user is going backwards
if (context.toStep < context.fromStep)
{
$('#wizard').smartWizard('hideMessage');
return true;
}
// continue to validate steps...
加载中,请稍侯......
精彩评论