jquery form wizard validation
I'm trying to implement a validation script (bassistance) with a jquery form wizard (http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx) but I'm having some problems.
On the page for the jquery wizard, a guy named "Tommy" came up with a piece of code to implement bassistance with the code. But for some reason I can't get it to work. It comes up saying if the field needs to be filled in etc and the next button doesn't work - which is fine, BUT, if I fill in all the fields, the next button still doesn't work..
function createNextButton(i) {
var stepName = "step" + i;
$("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next ></a>");
/* VALIDATION */
if (options.validationEnabled) {
var stepIsValid = true;
$("#" + stepName + " :input").each(function(index) {
stepIsValid = !element.validate().element($(this)) && stepIsValid;
});
if (!stepIsValid) {
return false;
}
}
/* END VALIDATION */
$("#" + stepName + "Next").bind("cl开发者_Go百科ick", function(e) {
$("#" + stepName).hide();
$("#step" + (i + 1)).show();
if (i + 2 == count)
$(submmitButtonName).show();
selectStep(i + 1);
});
}
Could someone help me figure this one out? :)
Ok so I added the validation to the click event and I figured out that "element.validate().element($(this)) && stepIsValid" actually existed.. If anyone else is using this and having the same problem, the solution is:
/* VALIDATION */
if (options.validationEnabled) {
var stepIsValid = true;
$("#"+stepName+" :input").each(function(index) {
checkMe = element.validate().element($(this));
//stepIsValid = !element.validate().element($(this)) && stepIsValid;
stepIsValid = checkMe && stepIsValid;
});
//alert("stepIsValid === "+stepIsValid);
if (!stepIsValid) {
return false;
};
};
/* END VALIDATION */
Try adding the validation into the click event
function createNextButton(i) {
var stepName = "step" + i;
$("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next ></a>");
$("#" + stepName + "Next").bind("click", function(e) {
/* VALIDATION */
if (options.validationEnabled) {
var stepIsValid = true;
$(this).closest("fieldset").find(":input").each(function(index) {
stepIsValid = element.validate().element($(this)) && stepIsValid;
});
if (!stepIsValid) {
return false;
}
}
/* END VALIDATION */
$("#" + stepName).hide();
$("#step" + (i + 1)).show();
if (i + 2 == count)
$(submmitButtonName).show();
selectStep(i + 1);
});
}
Update
OR... Try removing the default check from the Receive Newsletters? checkbox (unchecked by default).
The click event isnt getting attached to the next button because the checkbox is required and checked, so stepIsValid
is false and createNextButton returns false before binding the click event.
精彩评论