在jQuery Unobtrusive Validation中对错误进行分组

Question

我有3行复选框,用户必须填写.验证是他必须在每行中选择至少一个复选框.所以我已经创建了强制性规则,因为据我所知,所需规则不适用于复选框.

一切都很好.问题是,由于每一行都是一个组,验证最终会给出3个不同的消息,尽管我只想要一个.

我在jsFiddle上创建了一个例子.因此,如果您只是单击提交,您将看到3条不同的消息,但我只想要一条消息.有没有办法将它们结合起来？我已经看到它通过常规的jQuery验证完成,但不是通过不引人注意的验证.

我也在这里发布相关代码,但是如果你遵循jsFiddle链接可能更容易看到.

<script type="text/javascript">
    (function ($) {
        $.validator.unobtrusive.adapters.addBool("mandatory", "required");
    } (jQuery));
</script>
<form id="the_form" action="#" method="post">

<p>
<input type="checkbox" name="g1" data-val="true" data-val-mandatory="An answer is required for every row" value="1"/><span>A1</span>
<input type="checkbox" name="g1" data-val="true" data-val-mandatory="An answer is required for every row" value="1" /><span>A2</span>
<input type="checkbox" name="g1" data-val="true" data-val-mandatory="An answer is required for every row" value="1" /><span>A3</span>
</p>
<p>
<input type="checkbox" name="g2" data-val="true" data-val-mandatory="An answer is required for every row" value="1" /><span>B1</span>
<input type="checkbox" name="g2" data-val="true" data-val-mandatory="An answer is required for every row" value="1" /><span>B2</span>
<input type="checkbox" name="g2" data-val="true" data-val-mandatory="An answer is required for every row" value="1" /><span>B3</span>
</p>
<p>
<input type="checkbox" name="g3" data-val="true" data-val-mandatory="An answer is required for every row" value="1" /><span>C1</span>
<input type="checkbox" name="g3" data-val="true" data-val-mandatory="An answer is required for every row"  value="1"/><span>C2</span>
<input type="checkbox" name="g3" data-val="true" data-val-mandatory="An answer is required for every row"  value="1"/><span>C3</span>
</p>

<p class="field-validation-error" data-valmsg-for="g1" data-valmsg-replace="true"></p>
<p class="field-validation-error" data-valmsg-for="g2" data-valmsg-replace="true"></p>
<p class="field-validation-error" data-valmsg-for="g3" data-valmsg-replace="true"></p>    

<input type="submit" value="Ok" />

</form>

Answer 1

您可以使用 CSS 隐藏除一条消息之外的所有消息。对于您的示例，使用常规同级组合器CSS 选择器，您可以通过添加以下样式来隐藏多余的消息（jsFiddle 上的工作示例）：

p.field-validation-error ~ p.field-validation-error { display: none }

这将隐藏p具有该类的所有元素.field-validation-error，如果它们前面有另一个p具有该类的元素.field-validation-error（它们必须具有相同的父级，但它们不必相邻）