Errores de agrupación en jQuery Unobtrusive Validación

Question

Tengo 3 filas de casillas de verificación que el usuario debe completar. La validación es que debe seleccionar al menos una casilla de verificación en cada fila. Así que he creado la regla obligatoria ya que, como yo lo entiendo, la regla requerida no se aplica a las casillas de verificación.

Todo esto funciona muy bien. El problema es que dado que cada fila es un grupo, la validación termina dando 3 mensajes diferentes, aunque realmente solo quiero uno.

He creado un example on jsFiddle. Entonces, si simplemente haces clic en enviar, verás 3 mensajes diferentes, pero solo quiero UN MENSAJE. ¿Hay alguna forma de combinarlos? Lo he visto hecho con la validación regular de jQuery, pero no con la validación discreta.

También estoy publicando el código correspondiente aquí, pero probablemente sea más fácil de ver si sigues el enlace 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

Puede ocultar todos menos uno de los mensajes utilizando CSS. Por su ejemplo, mediante el selector CSS hermanos general combinador, podría ocultar los mensajes superfluos añadiendo el estilo siguiente (working example on jsFiddle):

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

Esto ocultará todos p elementos con la clase .field-validation-error IIF vayan precedidos por otro elemento p con la clase .field-validation-error (deben tener el mismo padre, pero no tienen que ser adyacentes)