如何在不复制相同类型消息的情况下显示动态表单的 jQuery 验证器错误消息

Question

我有一个代表发票输入表单的表格，行数是动态的，取决于用户在发票中放入了多少产品，

每行输入字段的数量始终相同，它们都代表相同的事物，因此具有相同的验证规则。

<form id="myform" name="myform" action="" method="">
<table>
    <tr>
        <td>
            <input type="text" name="amount_id1" id="amount_id1" value=""/>
        </td>
        <td>
            <input type="text" name="price_id1" id="amount_id1" value=""/>
        </td>
        ....
    </tr>
    <tr>
        <td>
            <input type="text" name="amount_id2" id="amount_id2" value=""/>
        </td>
        <td>
            <input type="text" name="price_id2" id="price_id2" value=""/>
        </td>
        .....
    </tr>
    ....
</table>
</form>

我正在使用 jQuery 验证插件： validation plugin

现在我想要发生的事情是，我想将所有错误包装到一个容器中，因为在每个输入字段旁边显示它们非常混乱。

我知道这可以通过包装器设置和 errorLabelContainer 来实现

但是，我不想显示重复的消息：
对于用户犯错的每个和所有 10 个字段，显示“金额必须是正数”x10 次确实没有用...
所以我想要的是，每种输入字段（无论是金额、价格、折扣、增值税还是其他） 如果有一个错误输入，我想针对这种错误显示 1 条错误消息
示例：
金额要求和数字作为班级规则。
如果用户忘记在不同的地方输入金额，我希望在错误容器中显示 1 条消息：“金额字段是必填项” 如果在旁边，他在金额字段中输入“字符或非数字”，我想要一个额外的错误消息，“金额字段应该是数字”'

另一种说法是：
如果消息已显示，则不显示，
如果不是，请显示它。

为了帮助向用户显示哪些字段无效，我只使用突出显示、取消突出显示设置，向相关字段添加一个类，使其带有红色边框。这就像一个魅力。

我尝试过使用 showErrors、invalidHandler、errorPlacement，但我无法让事情正常工作。差远了。没有包含整个表单的当前无效表单元素的数组/对象。然而，errorMap 和 errorList 包含当前验证阶段的错误。这意味着由于焦点/模糊效果，一半的时间它只包含一个字段的错误。是的，我知道禁用所有选项，因此只有在尝试提交表单时才会触发验证，这意味着 errorMap/errorList 将始终包含整个表单的所有错误。但这并不是 imo/myBoss'sOpinion 的真正选择。我尝试在验证器源中挖掘验证器属性，寻找可以提供帮助的东西，但我似乎找不到任何东西..

我希望我解释得足够好，有人可以帮助我解决这个问题，因为我在这个问题上已经有一段时间了。

欢迎任何帮助/建议/想法:)

Answer 1

请参阅http://docs.jquery.com/Plugins/Validation/validate#options，特别是groups 选项。

指定错误消息的分组。一种 组由任意组组成 名称作为键和空格分隔 元素名称列表作为值。 使用 errorPlacement 控制位置 群组消息已放置。

$("#myform").validate({
  groups: {
    username: "fname lname"
  },
  errorPlacement: function(error, element) {
     if (element.attr("name") == "fname" 
                 || element.attr("name") == "lname" )
       error.insertAfter("#lastname");
     else
       error.insertAfter(element);
   },
   debug:true
 })

上面指定的errorPlacement 选项指的是：

自定义创建错误的位置 标签。第一个论点：被创造的 错误标签作为 jQuery 对象。第二 参数：无效元素作为 jQuery 对象。

这是在same manual page 上定义的。