jQuery Unobtrusive Validation 中的分组错误答案

【问题标题】：Grouping errors in jQuery Unobtrusive ValidationjQuery Unobtrusive Validation 中的分组错误
【发布时间】：2011-07-13 08:53:20
【问题描述】：

我有 3 行用户必须填写的复选框。验证是他必须在每一行中至少选择一个复选框。因此，我创建了强制规则，因为据我了解，所需规则不适用于复选框。

这一切都很好。问题是，由于每一行都是一个组，因此验证最终会给出 3 条不同的消息，尽管我真的只想要一个。

我创建了一个example on 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>

【问题讨论】：

标签： javascript jquery jquery-validate unobtrusive-validation

【解决方案1】：

您可以使用 CSS 隐藏除一条消息之外的所有消息。对于您的示例，使用 General 同级组合器 CSS 选择器，您可以通过添加以下样式 (working example on jsFiddle) 来隐藏多余的消息：

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

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

【讨论】：