jQuery Validation plugin errorPlacement for checkbox

Question

I use jQuery Validation plugin to validate my form. My problem is the place of error message for checkbox. please see this image:

This is html part related to checkboxes + 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>

Could someone kindly help me if it is possible to fix this problem or showing the error message (for all input types) right next to the question? (I mean exactly the same line as question, after * )??

Thanks

Answer 1

I added a class to the label for your question in order to find that easier...

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

Then you simply need to practice your "DOM traversal" techniques. Study the methods here.

• $(element).parents('div') finds the div container of your element.

• Then .prev($('.question')) gets you to the .question that is the first previous sibling of this div.

Put it all together and it inserts the error message right after the question.

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

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

Maybe you don't need the conditional, since that technique should work on all of your input types.

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

Otherwise, if your HTML is different, then you can use the conditional with a slightly modified DOM traversal.