Erreur de plugin jQuery ValidationPlacement pour checkbox

J'utilise jQuery plugin de Validation pour valider mon formulaire. Mon problème est le lieu de message d'erreur pour une case à cocher. veuillez voir cette image:

Erreur de plugin jQuery ValidationPlacement pour checkbox

C'est la partie html liées à des cases à cocher + 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>

Quelqu'un pourrait-il bien vouloir m'aider si c'est possible de résoudre ce problème ou montrant l'erreur
message (pour tous les types d'entrée), juste à côté de la question? (Je veux dire exactement la même ligne que la question, après * )??

Grâce

source d'informationauteur mOna

  1. 18

    J'ai ajouté un class à la label pour votre question, afin de trouver plus facile...

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

    Ensuite, il vous suffit de pratiquer votre "DOM traversée" des techniques. Étudier les méthodes ici.

    • $(element).parents('div') trouve le div conteneur de votre element.

    • Puis .prev($('.question')) vous arrive à la .question qui est le premier frère précédent de cette div.

    Mettre tout cela ensemble et il insère le message d'erreur juste après la question.

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

    Dans 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
}
}

    DÉMO: http://jsfiddle.net/sgsvtd6y/

    Peut-être que vous n'avez pas besoin de le conditionnel, car cette technique devrait fonctionner sur tous vos input types.

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

    Sinon, si votre code HTML est différente, vous pouvez utiliser le conditionnel avec un peu modifié DOM traversée.