5

jQueryアコーディオンを使用してフォームをいくつかのパネルに分割し、jQquery検証を使用して必須フィールドを確認しています。開いているパネルにある限り、検証済みのフィールドにエラーを表示するのに最適です。

例。ツリーアコーディオンパネルがあり、最初に検証が必要な2つのフォームフィールドがあるとします。ここで、訪問者がパネル2または3に切り替えて、パネル1の必須フィールドに入力せずにフォームを送信した場合、最初のアコーディオンパネルを開いてエラーを表示します。

誰かがこれを機能させる方法を知っていますか？

これは私が今日使用しているコードです：

$(document).ready(function() {
$("#accordion").accordion({
    autoHeight: false,
    navigation: true,
});

$("#validate_form").validate({
    rules: {
        page_title: "required",
        seo_url: "required",
        AccordionField: {
            required: true
        }
    },
    ignore: [],
    messages: {
        page_title: "Please enter a page title",
        seo_url: "Please enter a valid name"
    }
 }); 
});
4

3 に答える 3

4

質問の特定の問題を解決するには、アコーディオンウィジェットのactivate（）メソッドを呼び出して最初のペインを開くinvalidHandlerコールバック関数を提供するだけです。

$("#validate_form").validate({
    // your options,
    invalidHandler: function(form, validator) {
        if (validator.numberOfInvalids() > 0) {
            $("#accordion").accordion("activate", 0);
        }
    }
});

とは言うものの、一般的なケース（任意のペインで無効な要素）を処理し、適切なペインに切り替える方が間違いなく優れています。invalidHandlerそのためには、コールバックから最初の無効な要素をフェッチする必要があります。errorClass検証エンジンで使用されるものと一致させることはできますが（errorデフォルト）、そのクラスはエラーメッセージラベルにも適用されるため、盲目的に一致させることはできません。：inputセレクターで結果を制限すると、ここで役立ちます。

そこから、closest（）を使用して祖先のアコーディオンペインを照合し、index（）を使用して他のペインとの相対的なインデックスを取得できます。これにより、次のコードが表示されます。

$("#validate_form").validate({
    // your options,
    invalidHandler: function(form, validator) {
        if (validator.numberOfInvalids() > 0) {
            validator.showErrors();
            var index = $(":input.error").closest(".ui-accordion-content")
                                         .index(".ui-accordion-content");
            $("#accordion").accordion("activate", index);
        }
    }
});

更新：この関数は最初にクラスで無効な要素を装飾する役割を果たしますが、通常は後でのみ呼び出されるため、をshowErrors()明示的に呼び出す必要があります。（出典： http： //forum.jquery.com/topic/jquery-validate-invalidhandler-is-called-before-the-errors-are-shown-maybe-better-vice-versa。）invalidHandlererror

于 2012-07-15T08:21:35.407 に答える
3

APIが少し変更されました。これは、将来的に選択された回答に基づいた実用的な例です。ignoreアコーディオンの非表示フィールドがバリデーターによって見落とされるのを防ぐために必要なことに注意してください。

$('form').validate({
    invalidHandler: function(event, validator) {
        if (validator.numberOfInvalids() > 0) {
            validator.showErrors();
            // Open accordion tab with errors
            var index = $(".has-error")
                .closest(".ui-accordion-content")
                .index(".ui-accordion-content");
            $(".accordion").accordion("option", "active", index);
        }
    },
    ignore: [],
});
于 2014-01-07T16:46:06.253 に答える
0

MVCを使用している場合は、invalidHandlerが作成されます。オーバーライドしようとしたとき（https://github.com/jzaefferer/jquery-validation/issues/765から）

$form.off('invalid-form.validate')
                .on('invalid-form.validate', newInvalidHandler);

フォームは常に送信されます。

私の解決策は、関数を引き出して、送信がクリックされたときにそれを呼び出すことです。また、ignore=[]を引き出す必要がありました

function ShowPanel() {
    var validator = $("form").validate();
    if (validator.numberOfInvalids() > 0) {
        validator.showErrors();
        var index = $(".input-validation-error")
                    .closest(".ui-accordion-content")
                    .index(".ui-accordion-content");
        $("#accordion").accordion("option", "active", index);
    } 
}

$("#Save").click(function () { if (!$("form").valid()) { ShowPanel(); } });

$("form").data("validator").settings.ignore = [];
于 2014-12-30T18:41:50.237 に答える