2

私はjquery検証プラグインを、ある種のフォームウィザードを作成するために見つけた他のプラグインと一緒に使用しています。私が抱えている問題は、フォームウィザードの次のボタンで検証プラグインを起動して、送信ボタンだけでなく各ステッププロセスが検証されるようにすることです。

これがjsfiddleです：http：//jsfiddle.net/DHNPz/

javascriptの部分には、フォーム用に作成したコードとformtowizardJSが含まれています。コードのこの部分を編集する必要があると想定しています。

    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

First, you'll need to add something like

ignore: ':hidden'

to your validate options so that it only validates visible fields. That way you can validate only the fields visible in each step, moving to the next step once they are valid. You can then check the validation at any time by running

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

to trigger the validation when someone clicks the next button. You'd update the code you pasted above like so:

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

回答済みですが、これも見つけました。

アイデアは、検証オプションで 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 に答える