Grouping errors in jQuery Unobtrusive Validation

Question

I have 3 rows of checkboxes which a user must fill out. The validation is that he must select at least one checkbox in each row. So I've created the mandatory rule since as I understand it the required rule doesn't apply to checkboxes.

This all works great. The problem is that since each row is a group the validation ends up giving 3 different messages although I only really want one.

I have created an example on jsFiddle . So if you simply click submit you'll see 3 different messages, but I only want ONE message. Is there a way to combine them? I've seen it done with the regular jQuery validation, but not with the unobtrusive validation.

I'm posting the relevant code here as well, but it's probably easier to see if you follow the jsFiddle link.

<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

You can hide all but one of the messages using CSS. For your example, using the General sibling combinator CSS selector, you could hide the superfluous messages by adding the following style ( working example on jsFiddle ):

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

This will hide all p elements with the .field-validation-error class iif they are preceded by another p element with the .field-validation-error class (they must have the same parent, but they don't have to be adjacent)