Группировка ошибок в jQuery Ненавязчивая проверка

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-селектор General sibling combinator, вы можете скрыть лишние сообщения, добавив следующий стиль ( рабочий пример для jsFiddle):

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

Это скроет все p элементы с .field-validation-error класс если им предшествует другой p элемент с .field-validation-error класс (у них должен быть один и тот же родитель, но они не должны быть смежными)