2

我正在使用 jquery 验证插件以及我发现的另一个插件来创建一种表单向导。我遇到的问题是在表单向导的下一个按钮上触发验证插件，因此每个步骤过程都得到验证，而不仅仅是在提交按钮上。

这是jsfiddle：http: //jsfiddle.net/DHNPz/

javascript 部分包含我为表单编写的代码以及 formtowizard JS。我假设我需要编辑这部分代码：

    function createNextButton(i) {
        var stepName = "step" + i;
        $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next'><button class='next' type='button'>Next Step</button></a>");

        $("#" + stepName + "Next").bind("click", function(e) {
            $("#" + stepName).hide();
            $("#step" + (i + 1)).show();
            if (i + 2 == count)
                $(submmitButtonName).show();
            selectStep(i + 1);
        });
    }

点击函数内部。我只是不确定如何在这里调用验证触发器

请帮忙！

4

2 回答 2

4

首先，您需要添加类似

ignore: ':hidden'

到您的validate选项，以便它只验证可见字段。这样，您可以仅验证每个步骤中可见的字段，一旦它们有效就转到下一步。然后，您可以随时通过运行检查验证

$('#RMAForm').validate().form()

当有人单击下一步按钮时触发验证。您将像这样更新上面粘贴的代码：

function createNextButton(i) {
    var stepName = "step" + i;
    $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next'><button class='next' type='button'>Next Step</button></a>");

    $("#" + stepName + "Next").bind("click", function(e) {
        // run the validation and check if the form is valid
        if ($('#RMAForm').validate().form()) {
            $("#" + stepName).hide();
            $("#step" + (i + 1)).show();
            if (i + 2 == count)
                $(submmitButtonName).show();
            selectStep(i + 1);
        } else {
            return false; // prevent moving on if the form is invalid
        }
    });
}
于 2013-01-02T20:09:51.873 回答
0

好吧，它是anserwed，但我也找到了这个。

Idee 是用验证选项扩展 nextButton 。像这样：

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) {
        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;
            });

            if (!stepIsValid) {
                return false;
            };
        };

        $("#" + stepName).hide();
        $("#step" + (i + 1)).show();
        if (i + 2 == count)
            $(submmitButtonName).show();
        selectStep(i + 1, 'next');
    });
}

所以在下一步之前，它会检查当前字段集中的所有元素。来源：在字段集之间验证

PS 不要忘记在创建向导时启用验证：

$("#RMAForm").formToWizard({
     submitButton: 'submitMe',
     validationEnabled: true
});
于 2013-01-02T20:40:29.377 回答