jQuery'de Gruplandırma hataları Gözlemlenmemiş Doğrulama

Question

Kullanıcının doldurması gereken 3 satırlık onay kutum var. Doğrulama, her satırda en az bir onay kutusunu seçmesi gerektiğidir. Bu yüzden zorunlu kural oluşturdum çünkü gerekli kuralın onay kutularına uygulanmadığını anladım.

Her şey harika çalışıyor. Sorun şu ki, her satır bir grup olduğu için, sadece bir tane istediğim halde doğrulama 3 farklı mesaj veriyor. Bir example on jsFiddle oluşturdum. Bu yüzden sadece gönder seçeneğini tıklarsanız 3 farklı mesaj görürsünüz, ancak sadece bir mesaj istiyorum. Onları birleştirmenin bir yolu var mı? Düzenli jQuery doğrulama ile yaptım, ama göze batmayan doğrulama ile değil.

İlgili kodu burada da gönderiyorum, ancak jsFiddle bağlantısını takip edip etmediğinizi görmek daha kolay.

<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

İletilerden bir tanesini CSS kullanarak gizleyebilirsiniz. onlar öncesinde IIf

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

Bu .field-validation-error sınıfıyla tüm p unsurları gizler: senin Örneğin, Genel kardeş combinator CSS seçici kullanarak, aşağıdaki stili (working example on jsFiddle) ekleyerek gereksiz mesajlar saklanabileceği .field-validation-error sınıfıyla başka bir p öğesi tarafından (aynı üst öğeye sahip olmalıdırlar, ancak bitişik olmaları gerekmez)