jQuery 验证错误消息放错位置答案

【问题标题】：jQuery validate error message misplacedjQuery 验证错误消息放错位置
【发布时间】：2014-11-11 06:00:14
【问题描述】：

我有多个具有相同名称和类的文本框。我根据需要使用 jQuery validate 来验证它。这里的问题是当我提交表单而不输入第一个复选框以外的字段值时，错误消息显示在第一个文本框旁边。例如，如果我提交表单而不为第二个文本框输入值，它将在第一个文本框附近显示错误消息。我认为这是因为使用相同的名称/类进行验证。

我尝试过使用类和名称。不用找了。我的示例代码如下。有什么想法吗？

HTML 部分

<input type="text" class="unit_price" name="add_purch_unit[]">
<input type="text" class="unit_price" name="add_purch_unit[]">

jQuery 部分

$(".unit_price").rules("add", { 
        required:true
    });

【问题讨论】：

是因为同名...
但是我这里用class来验证
即添加规则...但内部验证器框架使用元素名称
那么，有什么办法可以避免这种情况吗？

标签： jquery jquery-validate

【解决方案1】：

$(".unit_price").rules("add", { 
    required:true
});

您的代码有两个问题。

您不能将 jQuery Validate 方法附加到针对多个元素的 jQuery 选择器。这部分的解决方案是将方法包装在 jQuery .each() 中。
```
$(".unit_price").each(function() {
    $(this).rules("add", { 
        required:true
    });
});
```
但是，您仍然不能复制name 属性。尽管我们从上面的 #1 中解决了问题，将规则分配给具有 class="unit_price" 的每个元素，但插件使用 name 属性来跟踪所有输入元素。解决方案是您必须还为每个元素分配一个唯一的name...没有解决此要求的方法。
```
<input type="text" class="unit_price" name="add_purch_unit[1]">
<input type="text" class="unit_price" name="add_purch_unit[2]">
```

【讨论】：

正是我在帖子中写的，所以我只会支持这个，你也应该去。
感谢@Sparky .each 也做同样的事情。我也测试过。无论如何，我必须使用不同的名称。
@Corner，不，.each()only 工作正常，只要您有唯一的 name 属性。换句话说，我没有为你提供两种不同的解决方案。无论您如何分配规则，您都必须具有唯一的name 属性。