jquery errorPlacement

我有以下内容：

$("#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: "
Please enter an account name.
", acct_type: "
Please choose an account type.
", acct_routing: "
Please enter a routing number.
", acct_num: "
Please enter an account number.
", c_acct_routing: "
Please confirm the routing number.
", c_acct_num: "
Please confirm the account number.
" }, // 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以使其不重复并正确显示错误消息？

提前致谢。

Answer 1

我认为你所追求的是更合适的errorContainer ， errorLabelContainer和wrapper选项 ，如下所示：

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

您现在可以从错误消息中删除

包装，这将包装它们，然后放在

，并隐藏当没有错误的时候

🙂

Answer 2

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

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

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

 errorContainer: '#div.error' 

errorPlacement更倾向于允许您将错误消息附加到一个非常特定的容器（即：TR中为错误消息保留的最后一个TD）。

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

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

 wrapper: "li" 

Answer 3

我想你只需要将它添加到你的validation方法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: "
Please enter an account name.
", acct_type: "
Please choose an account type.
", acct_routing: "
Please enter a routing number.
", acct_num: "
Please enter an account number.
", c_acct_routing: "
Please confirm the routing number.
", c_acct_num: "
Please confirm the account number.
" }, errorLabelContainer: $("ul", $('div.error')), wrapper: 'li', errorContainer: $('div.error'), errorPlacement: function(error, element) { $('#errorList').append(error); } });