Search code examples
jqueryvalidationformwizard

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("click", 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? :)


Solution

  • 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 */