jquery form wizard validation

落爺英雄遲暮 提交于 2019-12-11 17:09:46

问题


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? :)


回答1:


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



回答2:


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.



来源:https://stackoverflow.com/questions/2046767/jquery-form-wizard-validation

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!