代码之家 › 专栏 › 技术社区 › Kung Fu Ninja

jquery错误位置

errorplacement jquery

3

Kung Fu Ninja · 技术社区 · 16 年前

我有以下几点:

$("#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(“”);然后第一次正确显示错误消息。如果我再按一次submit,它将向div追加另一组消息;那么我只会收到一条错误消息。

如何刷新错误列表,使其不会重复并正确显示错误消息?

提前谢谢。

4 回复 | 直到 16 年前

1

2

Nick Craver 16 年前

errorContainer , errorLabelContainer and wrapper options ,如下所示:

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

<li></li> <div id="#errorList"><ul></ul></div> ,并隐藏 <div> 没有错误时:)

2

JMP 16 年前

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

errorContainer: '#div.error'

此外,您不需要将错误消息用HTML包装,您可以使用:

wrapper: "li"

3

1

Teja Kantamneni 16 年前

我想你只需要把这个添加到你的validate方法中 errorContainer: errorList errorLabelContainer: $("ol", container), wrapper: 'li',

试试看。。。

4

1

Kung Fu Ninja 16 年前

  $("#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);
            } 
        });