Grupowanie błędów w jQuery Dyskretna walidacja

Question

Mam 3 rzędy pól wyboru, które użytkownik musi wypełnić. Walidacja polega na tym, że musi wybrać co najmniej jedno pole wyboru w każdym wierszu. Dlatego stworzyłem obowiązującą regułę, ponieważ, jak rozumiem, wymagana reguła nie dotyczy pól wyboru.

To wszystko działa świetnie. Problem polega na tym, że ponieważ każdy wiersz jest grupą, kończy się sprawdzanie poprawności, dając 3 różne komunikaty, chociaż ja naprawdę chcę tylko jeden.

Utworzono example on jsFiddle. Jeśli więc po prostu klikniesz Prześlij, zobaczysz 3 różne wiadomości, ale chcę tylko JEDNEJ wiadomości. Czy istnieje sposób na ich połączenie? Widziałem, jak to się stało z regularną walidacją jQuery, ale nie z dyskretnym sprawdzaniem poprawności.

Zamieszczam tutaj również odpowiedni kod, ale prawdopodobnie łatwiej będzie sprawdzić, czy podążasz za odnośnikiem 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

Możesz ukryć wszystkie wiadomości oprócz jednego za pomocą CSS. Na swoim przykładzie, stosując ogólnego rodzeństwa selektora CSS, można ukryć zbędne wiadomości dodając następujące styl (working example on jsFiddle):

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

Spowoduje to ukrycie wszystkich p elementy z klasy .field-validation-error IIF są poprzedzone przez inny element p z klasą .field-validation-error (muszą mieć tego samego rodzica, ale nie muszą być w pobliżu)