Błąd sprawdzania poprawności jQuery ValidationPlacement dla pola wyboru

Question

Używam wtyczki walidacji jQuery do sprawdzania poprawności mojego formularza. Moim problemem jest miejsce na komunikat o błędzie w polu wyboru. proszę zobaczyć ten obraz:

To html część związana z pól wyboru + jQuery Validation:

<fieldset id = "q8"> <legend class="Q8"></legend> 
<label> What are your favourite genres of movies?<span>*</span></label> 
<div class="fieldset content"> 

<style type="text/css"> 
.checkbox-grid li { 
display: block; 
float: left; 
width: 25%; 
}  
</style> 

<ul class="checkbox-grid"> 
<li><input type="checkbox" name="q8[]" value="Action"><label for="checkgenre[]">Action</label></li> 
<li><input type="checkbox" name="q8[]" value="Adventure"><label for="checkgenre[]">Adventure</label></li> 
<li><input type="checkbox" name="q8[]" value="Comedy"><label for="checkgenre[]">Comedy</label></li> 
<li><input type="checkbox" name="q8[]" value="Animation"><label for="checkgenre[]">Animation</label></li> 
<li><input type="checkbox" name="q8[]" value="Drama"><label for="checkgenre[]">Drama</label></li> 
<li><input type="checkbox" name="q8[]" value="Romance"><label for="checkgenre[]">Romance</label></li> 
    //Continued the same for OTHER CHECKBOXES 

</div> 
</fieldset> 

    //html for other questions... 

<input class="mainForm" type="submit" name="continue" value="Save and Continue" /> 

</form> 

<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script> 
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script> 

<script> 
$(document).ready(function() { 

$('#form2').validate({ // initialize the plugin 
    errorLabelContainer: "#messageBox", 
    wrapper: "li", 

    rules: { 
     "q8[]": { 
      required: true, 
     }, 
     "q9[]": { 
      required: true, 
     }, 
     q10: { 
      required: true, 
     }, 
     q11: { 
      required: true, 
     }, 
     q12: { 
      required: true, 
     } 

    }, 

     errorPlacement: function(error, element) { 

     if (element.attr("type") == "radio") { 
     error.insertBefore(element); 
     } else { 
     error.insertBefore(element); 

    } 
    } 

}); 
}); 
</script> 

Czy ktoś łaskawie mi pomóc, czy jest możliwe, aby rozwiązać ten problem lub pokazując błąd komunikat (dla wszystkich typów danych wejściowych) tuż obok pytania? (Mam na myśli dokładnie tę samą linię co pytanie, po *)?

Dzięki

Answer 1

dodałem class do label na swoje pytanie, aby wybrać, które łatwiej ...

<label class="question">What are your favourite genres of movies?<span>*</span></label> 

Wtedy po prostu trzeba ćwiczyć techniki „DOM przemierzania”. Przestudiuj metody: here.

• $(element).parents('div') znajdzie pojemnik swojego elementdiv.

• Następnie .prev($('.question')) przeniesie Cię do .question, który jest pierwszym poprzednim rodzeństwem tego div.

Połóż to wszystko razem i wstawi komunikat o błędzie zaraz po pytaniu.

error.insertAfter($(element).parents('div').prev($('.question'))) 

ciągu errorPlacement:

errorPlacement: function (error, element) { 
    if (element.attr("type") == "checkbox") { 
     error.insertAfter($(element).parents('div').prev($('.question'))); 
    } else { 
     // something else if it's not a checkbox 
    } 
} 

DEMO: http://jsfiddle.net/sgsvtd6y/

Może nie trzeba warunkowy, ponieważ technika powinny pracować na wszystkich typach input.

errorPlacement: function (error, element) { 
    error.insertAfter($(element).parents('div').prev($('.question'))); 
} 

W przeciwnym razie, jeśli HTML jest inny, można użyć warunku z nieznacznie zmodyfikowanym przejściem DOM.