Question

我正在使用jquery验证插件以及我发现创建一种表单向导的另一个插件。我遇到的问题是在表单向导的下一个按钮上触发验证插件，这样每个步骤进程都会被验证，而不是仅仅处于提交按钮。

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

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

请帮忙！

Answer 1

首先，您需要添加类似

的内容

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

Answer 2

嗯，这是一个很好的，但我也找到了这个。

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

因此，在下一步之前，它会检查当前字段集中的所有元素。资料来源：Validate between fieldsets

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

$("#RMAForm").formToWizard({
     submitButton: 'submitMe',
     validationEnabled: true
});

使用表单向导插件进行jquery验证？

2 个答案: