Login/Register
jQuery Validation plugin errorPlacement for checkbox
Asked Answered
Solved jquerycheckboxjquery-validateerrorplacement
C

1

18

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

enter image description here

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

Culminate answered 25/9, 2014 at 14:41 Comment(1)
You should never put <style></style> tags within your <body></body> container. – Guria
G
30

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.

Guria answered 25/9, 2014 at 16:16 Comment(1)
Wow! Worked well :) Thank you so much for your complete explanation :) – Culminate

© 2022 - 2024 — McMap. All rights reserved.