jquery - 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

我为您的问题添加了一个class，label以便更容易找到...

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

然后你只需要练习你的“DOM 遍历”技术。研究这里的方法。

• $(element).parents('div')找到div你的容器element。

• 然后.prev($('.question'))让你找到.questionthis 的第一个上一个兄弟姐妹div。

将它们放在一起，它会在问题之后立即插入错误消息。

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

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

演示：http: //jsfiddle.net/sgsvtd6y/

也许您不需要条件，因为该技术应该适用于您的所有input类型。

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

否则，如果您的 HTML 不同，那么您可以使用带有稍微修改的 DOM 遍历的条件。