jquery - jquery errorPlacement

Question

私は次のものを持っています：

$("#pmtForm").validate({
            rules: {
                    acct_name: "required",                        
                    acct_type: "required",  
                    acct_routing:  { 
                                     required: true,    
                                     digits: true,
                                     exactLength:9
                                     }, 
                    acct_num:      { 
                                     required: true,    
                                     digits: true
                                     }, 
                    c_acct_routing:{ 
                                     equalTo: '#acct_routing'
                                     },     
                    c_acct_num:    { 
                                     equalTo: '#acct_routing'
                                     }      
            },
            messages: {
                    acct_name: "<li>Please enter an account name.</li>",
                    acct_type: "<li>Please choose an account type.</li>",
                    acct_routing: "<li>Please enter a routing number.</li>",
                    acct_num: "<li>Please enter an account number.</li>",
                    c_acct_routing: "<li>Please confirm the routing number.</li>",
                    c_acct_num: "<li>Please confirm the account number.</li>"
            },

        //  errorContainer: '#div.error',

            errorPlacement: function(error, element) {
                $('#errorList').html("");
                $('#errorList').append(error);
                $('div.error').attr("style","display:block;");  
            } 
        });

フォームの上のdivにエラーメッセージを挿入しようとしています。私の問題は、次の行を削除した場合です：$（'＃errorList'）。html（ ""）; その後、最初はエラーメッセージが正しく表示されます。もう一度送信を押すと、別のメッセージのセットがdivに追加されます。$（'＃errorList'）。html（ ""）;を保持する場合 その後、エラーメッセージが1つだけ表示されます。

アカウント番号を入力してください。

errorListを更新して、それ自体が繰り返されず、エラーメッセージが正しく表示されるようにするにはどうすればよいですか？

前もって感謝します。

Answer 1

私はあなたが求めているのは、より適切errorContainerでerrorLabelContainer、wrapper次のようなオプションだと思います。

$("#pmtForm").validate({
        rules: { ... },
        messages: { ... },
        errorContainer: '#errorList',
        errorLabelContainer: "#errorList ul",
        wrapper: 'li'
});

<li></li>これで、エラーメッセージから折り返しを削除できます。これにより、エラーメッセージが折り返され、に配置され、エラーがない場合は<div id="#errorList"><ul></ul></div>非表示になります:)<div>

Answer 2

jQueryの検証により、エラーメッセージの状態が制御されます。つまり、次を使用する必要はありません。

$('#errorList').html("");

エラーコンテナの状態を制御します。この場合、次のものを使用しても問題ありません。

errorContainer: '#div.error'

errorPlacementは、エラーメッセージを非常に特定のコンテナ（つまり、エラーメッセージ用に予約されているTRの最後のTD）に追加できるようにすることを目的としています。

FireBugと同様のツールを使用する場合、jQuery Validationがエラーメッセージをエラーコンテナに追加し、フォームの要素がルールを通過するかどうかに基づいてその可視性を制御することがわかります。

また、エラーメッセージをHTMLでラップする必要はありません。次を使用できます。

wrapper: "li"

Answer 3

これをvalidateメソッドに追加するだけでよいと思います errorContainer: errorList errorLabelContainer: $("ol", container), wrapper: 'li',

それを試して見てください...

Answer 4

これは機能します：

  $("#addPmtAcctForm").validate({
            rules: {
                    acct_name: "required",                        
                    acct_type: "required",  
                    acct_routing:  { 
                                     required: true,    
                                     digits: true,
                                     exactLength:9
                                     }, 
                    acct_num:      { 
                                     required: true,    
                                     digits: true
                                     }, 
                    c_acct_routing:{ 
                                     equalTo: '#acct_routing'
                                     },     
                    c_acct_num:    { 
                                     equalTo: '#acct_num'
                                     }      
            },
            messages: {
                    acct_name: "<li>Please enter an account name.</li>",
                    acct_type: "<li>Please choose an account type.</li>",
                    acct_routing: "<li>Please enter a routing number.</li>",
                    acct_num: "<li>Please enter an account number.</li>",
                    c_acct_routing: "<li>Please confirm the routing number.</li>",
                    c_acct_num: "<li>Please confirm the account number.</li>"
            },

            errorLabelContainer: $("ul", $('div.error')), wrapper: 'li',

            errorContainer: $('div.error'),

            errorPlacement: function(error, element) {
                $('#errorList').append(error);
            } 
        });