jQuery错误放置答案

【问题标题】：jquery errorPlacementjQuery错误放置
【发布时间】：2010-05-29 01:56:37
【问题描述】：

我有以下：

$("#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("");那么我只会收到一条错误消息。

请输入帐号。

如何刷新 errorList 使其不会重复并正确显示错误消息？

提前致谢。

【问题讨论】：

你的问题正好帮我找到了问题，谢谢:-)

标签： jquery errorplacement

【解决方案1】：

我认为你追求的是更合适的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】：

jQuery 验证将为您控制错误消息的状态。也就是说，您不必使用：

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

控制错误容器的状态。在这种情况下，您应该可以使用：

errorContainer: '#div.error'

errorPlacement 更多是为了让您将错误消息附加到一个非常具体的容器（即：TR 中为错误消息保留的最后一个 TD）。

如果您使用 FireBug 类似的工具，您会看到 jQuery Validation 会将错误消息附加到您的错误容器中，并根据表单元素是否通过其规则来控制其可见性。

此外，您不需要将错误消息包装在 HTML 中，您可以使用：

wrapper: "li"

【讨论】：

【解决方案3】：

我认为您只需将其添加到您的验证方法中 errorContainer: errorList errorLabelContainer: $("ol", container), wrapper: 'li',

试试看...

【讨论】：

快到了。该链接非常有帮助。现在，我有：errorLabelContainer: $("ul", $('div.error')), wrapper: 'li', errorContainer: $('div.error'), errorPlacement: function(error, element) { $ ('#errorList').append(error);我的新问题是即使c_acct_num = acct_num，最后的错误信息也不会消失。
为什么有了error容器后还需要errorPlacement？
哎呀，应该是：c_acct_num: { equalTo: '#acct_num' }

【解决方案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);
            } 
        });

【讨论】：