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

时间:2013-01-02 19:40:59

标签: jquery forms validation jquery-form-wizard

我正在使用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);
        });
    }

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

请帮忙!

2 个答案:

答案 0 :(得分:3)

首先,您需要添加类似

的内容
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
        }
    });
}

答案 1 :(得分:0)

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

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