jQuery Plugin di convalida errorPlacement per checkbox

Question

Uso il plugin jQuery Validation per convalidare il mio modulo. Il mio problema è il posto del messaggio di errore per la casella di controllo. vedere questa immagine:

Questo fa parte html relativi a caselle + 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> 

Potrebbe qualcuno gentilmente mi aiuti se è possibile per risolvere questo problema o mostrando l'errore messaggio (per tutti i tipi di input) accanto alla domanda? (Intendo esattamente la stessa riga della domanda, dopo *) ??

Grazie

Answer 1

ho aggiunto un class al label per la tua domanda al fine di trovare quella più facile ...

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

Poi è sufficiente praticare le tue tecniche di "DOM traversal". Studia i metodi here.

• $(element).parents('div') trova la div contenitore del vostro element.

• Quindi .prev($('.question')) ti porta allo .question che è il primo fratello precedente di questo div.

Metti tutto insieme e inserisce il messaggio di errore subito dopo la domanda.

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

Entro 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/

Forse non occorre il condizionale, dal momento che la tecnica dovrebbe funzionare su tutti i tipi input.

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

Altrimenti, se il codice HTML è diverso, è possibile utilizzare il condizionale con un attraversamento DOM leggermente modificato.