复选框的jQuery Validation插件errorPlacement答案

【问题标题】：jQuery Validation plugin errorPlacement for checkbox复选框的jQuery Validation插件errorPlacement
【发布时间】：2014-11-20 09:28:46
【问题描述】：

我使用 jQuery Validation 插件来验证我的表单。我的问题是复选框错误消息的位置。请看这张图片：

这是与复选框 + jQuery Validation 相关的 html 部分：

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

如果可以解决此问题或显示错误，有人可以帮助我吗问题旁边的消息（适用于所有输入类型）？（我的意思是与问题完全相同的行，在 * 之后）？？

谢谢

【问题讨论】：

你不应该将<style></style>标签放在你的<body></body>容器中。

标签： jquery checkbox jquery-validate errorplacement

【解决方案1】：

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

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

然后您只需要练习“DOM 遍历”技术。研究方法here。

$(element).parents('div') 找到您的element 的div 容器。
然后.prev($('.question')) 将您带到.question，这是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 遍历的条件。

【讨论】：

哇！工作得很好:) 非常感谢您的完整解释:)