4

こんにちは、フォームの検証に jQuery 検証を使用しています。

フォームはタブ内にあります。エラーが発生した場合、エラーが存在するというアイコンをタブに追加して、ユーザーが視覚的に見えるようにします

ここまでは順調ですね。

私の問題は、エラーを修正した後、タブアイコンのエラーを削除できないことです。バリデーターは成功を介してアクセスできると想定していましたが、そうではありません

最初のタブ (tab0) に検証用の 3 つのフィールド (field1、field2、field3) があると仮定します。

ここに完全なコードがあります

    $("form#Form1")
        .validate({
            invalidHandler: function(form, validator) {              
                //TAB 0
                if (validator.errorMap.field1 != "" && validator.errorMap.field2 != "" && validator.errorMap.field3 != "") {
                    if ($("#tabs>ul>li").eq(0).find("img").length == 0) {
                        $("#tabs>ul>li").eq(0).prepend("<img src=\"error.gif\">");
                    }
                }               
            },
            errorClass: "errorField",
            errorElement: "p",
            errorPlacement: function(error, element) {
                var parent = element.parent();
                parent.addClass("error");
                error.prependTo( parent );
            },
//validator in not accessible via success
//so my code its not working
            success: function(element,validator) {
                var parent = element.parent();
                parent.removeClass("error");
                $(parent).children("p.errorField").remove();
                //TAB 0
                if (validator.errorMap.field1 == "" && validator.errorMap.field2 == "" && validator.errorMap.field2 == "") {
                    if ($("#tabs>ul>li").eq(0).find("img").length == 0) {
                        $("#tabs>ul>li").eq(0).find("img").remove();
                    }
                }   

           },   
            rules: {
                    field1: { required: true },
                    field2: { required: true },
                    field3: { required: true }      
                    }
    });

どんな提案でも大歓迎です。

4

7 に答える 7

2

検証する直前に、すべてのタブからアイコンを削除するのはどうですか。

 $("form#Form1")
    .validate({
        //remove all icons here.
        //rest of your code

検証が再び失敗すると、必要に応じてアイコンが置き換えられます。

于 2010-02-24T13:29:16.253 に答える
1

以下は私にとってはうまくいきます。else 句の最初のセレクターにある #formID を使用すると、ビジーなフォームのコードが高速化されることがわかりました。

$.validator.unobtrusive.parse(formID);
if ($(formID).valid()) {
    ...
    ...
}
else {
    $("#formID  #tabID").tabs("select", $("#formID .input-validation-error")
        .closest(".ui-tabs-panel").get(0).id);
}
于 2012-05-29T13:49:20.387 に答える
1

数か月が経ちましたが、この問題を自分で処理する必要がありましたが、良い解決策を思いついたと思います.

でエラーを含むタブを装飾するのではなく、およびハンドラをinvalidHandler使用して、無効なエントリを含むタブを適切に強調表示または強調表示解除します。これとは異なり、送信が試行されるまで (またはそれを検証するための手動呼び出しが行われるまで) 呼び出されず、 onBlurを含む無効なフィールドが処理されるたびに呼び出されます。highlightunhighlightinvalidHandlerhighlightunhighlight

jQuery('#Form').validate({
    highlight: function(element, errorClass, validClass) {
        $(element).addClass(errorClass).removeClass(validClass);
        $('a[href=#' + $(element).parents('.ui-tabs-panel').attr('id') + ']').addClass(errorClass).removeClass(validClass);
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).removeClass(errorClass).addClass(validClass);
        $('a[href=#' + $(element).parents('.ui-tabs-panel').attr('id') + ']').removeClass(errorClass).addClass(validClass);
    }
});

上記のコードでは、無効な要素から適切なエラーと有効なクラスを追加highlightおよびunhighlight削除し (デフォルトの動作)、(ダブル) セレクターを使用して、<a />その要素に含まれる div をロードするものを取得し、同じクラスを追加または削除します。そのタブのリンクに。このコードは、タブのコンテンツが AJAX でロードされておらず、div をロードするリンクに div のアンカー ID への href があることを前提としています。タブ リンクの構成が異なる場合は、必要に応じてセレクターを少し調整する必要があります。

アップデート

これをさらにテストした後、ソリューションの正当性を低下させる可能性のある 1 つの落とし穴を特定しました。つまり、これにより、そのタブに無効な要素がまだあるかどうかに関係なく、タブ リンクからエラー クラスが削除されます。無効な要素は引き続き強調表示されますが、タブは強調表示されなくなります。この問題に対する実行可能な回避策を試してみましたが、これまでのところ見つかりませんでした。もしそうなら、私はこれを更新します。

于 2010-05-24T22:52:25.867 に答える
0

私は同じ問題と戦っていますが、あきらめました...私見の本当のブロッカーは、jQueryの検証にonBeforeValidateコールバックがないことです。これにより、検証が開始される前にすべてのエラー アイコンを削除し、必要に応じて validate() に再割り当てさせることができます。

于 2010-06-28T10:36:50.453 に答える
0

私はかなりきれいでユーザーフレンドリーだと思う解決策を思いつきました。次のエラーでタブにフォーカスするだけです。これは、エラーが発生したときに入力がクラスinput-validation-errorを取得する限り機能しますが、何かを探すためのコード、ここに関数があります：

function FocusTabWithErrors(tabPanelName) {
    var tabpanel = $(tabPanelName);
    var tabs = tabpanel.children('div').toArray();
    var tabNames = Array();
    for (var i = 0; i < tabs.length; i++) {
        tabNames[i] = "#" + tabs[i].id;
    }
    tabpanel.find(":input").each(function () {
        if ($(this).hasClass('input-validation-error')) { 
            for (var z = 0; z < tabNames.length; z++) {
                if ($(tabNames[z]).find($(this)).length)
                    tabpanel.tabs("select", z);
            }
            return false; // ends each
        }
        return true;
    });
}

次に、フォームの送信イベントにバインドします。

    $('#myForm').submit(function () {
        FocusTabWithErrors('#tabPanel');
    });

あなたの考えを聞かせてください。

于 2011-11-01T15:36:21.797 に答える
0

ソースを見ると、フィールドが有効になったときに何を削除するかを理解するために彼がすることは、適切な CSS クラスを持つ適切なタイプの要素を探すことだけのようです。デフォルトでは、それは <label /> と "error" です。そこで、カスタムの errorPlacement 関数に追加のコードを書いて、フィールドが無効な場合にタブ ヘッダーに追加のラベルを貼り付けました。正しく作成されていれば、フィールドが有効になるとすぐにラベルを削除してくれました。

 errorPlacement: function (error, element) {
                $(error).appendTo($(element).closest('.form-item').find('.form-label-error'));
                var tabLabel = $("<label style='position: absolute; '/>")
                .attr("for", element.attr('id'))
                .addClass("error")
                .html("*");

                $('a[href="#' + $(element).closest('.ui-tabs-panel').attr("id") + '"] .tab-errors').append(tabLabel);
                resizeDialog($('#popup-container'));
            }

ラベルの位置を絶対的なものにしたことに注意してください。これにより、ラベルが互いに重なり合うようになりました。ユーザーにとっては、10 個のスタックと 1 個のスタックの間に違いはありません。マークする正しいタブは、DOM ツリーをトレースするだけでわかります (Nathan Taylor に感謝します!)。おそらく、それがタブにない場合、セレクターは失敗するはずです。私のタブ定義は次のようになります。

<ul>
    <li><a href="#protocol-settings">Protocol<div style="display: inline-block; width:5px; height:10px; margin-left: 2px;" class="tab-errors"></div></a></li>
    <li><a href="#auth-settings">Authentication<div style="display: inline-block; width:5px; height:10px; margin-left: 2px;" class="tab-errors"></div></a></li>
    <li><a href="#trust-settings">Certificates<div style="display: inline-block; width:5px; height:10px; margin-left: 2px;" class="tab-errors"></div></a></li>
</ul>
于 2011-02-19T01:42:02.613 に答える
0

バリデーターが以前に構成されたjquery セレクターにオプションを渡さずに、 validate()メソッドを呼び出すことで、いつでもバリデーターインスタンスを取得できます。また、成功のコールバックは、無効な入力用に作成された DOM ラベルを指す単一のパラメーターを受け取ることにも注意してください。したがって、成功のコールバックは次のようになり、期待どおりに機能するはずです。

success: function(label) {
    var parent = label.parent(); // Or any other logic to find the parent container
    parent.removeClass("error");
    $(parent).children("p.errorField").remove();
    validator = $("form#Form1").validate(); 
    // not sure, but $(this).validate() should also return validator

    //TAB 0
    if (validator.errorMap.field1 == "" && validator.errorMap.field2 == "" && validator.errorMap.field2 == "") {
        if ($("#tabs>ul>li").eq(0).find("img").length == 0) {
            $("#tabs>ul>li").eq(0).find("img").remove();
        }
    }   
}
于 2012-02-22T20:31:21.633 に答える