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

我想插入错误消息的形式之上的股利。我的问题是，如果我删除这一行：$（'＃errorList'）。html（“”）;那么它会在第一次正确显示错误消息。如果我再次提交一次，它会将另一组消息附加到div。如果我保留$（'＃errorList'）。html（“”）;那么我只会得到一个错误信息。

请输入一个帐号。

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

在此先感谢。

Answer 1

这个工程：

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

Answer 2

我觉得你是以后更合适的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> :)

Answer 3

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

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

来控制你的错误容器的状态。在这种情况下，你应该确定使用：

errorContainer: '#div.error' 

errorPlacement更意在让你的错误信息附加到一个非常特殊的容器（即：在TR最后TD预留用于错误信息）。

如果你使用Firebug类似的工具，你会看到jQuery验证将追加错误消息给你的错误容器和控制基于表单的元素是否通过其规则其知名度。

而且，你不应该需要包装在HTML您的错误信息，您可以使用：

wrapper: "li" 

Answer 4

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

尝试看看...