jQuery 验证插件错误放置复选框 [英] jQuery Validation plugin errorPlacement for checkbox

问题描述

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

这是与复选框 + jQuery 验证相关的 html 部分:

<legend class="Q8"></legend><标签>您最喜欢的电影类型是什么?<span>*</span></label><div class="fieldset content"><style type="text/css">.checkbox-grid li {显示:块；向左飘浮;宽度:25%；}</风格><ul class="checkbox-grid"><li><input type="checkbox";名称=q8[]"value=Action">Action<li><input type="checkbox";名称=q8[]"value=Adventure">Adventure<li><input type="checkbox";名称=q8[]"value=Comedy">Animation<li><input type="checkbox";名称=q8[]"value=戏剧">
</fieldset>//其他问题的html...<输入类=mainForm"类型=提交"名称=继续"值=保存并继续"/></表单><script src=http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script><script src=http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script><脚本>$(document).ready(function() {$('#form2').validate({//初始化插件errorLabelContainer: "#messageBox",包装纸:li"，规则:{q8[]":{要求:真实，},q9[]":{要求:真实，},问题 10:{要求:真实，},问题 11:{要求:真实，},问题 12:{要求:真实，}},错误位置:函数(错误，元素){if (element.attr("type") == "radio") {error.insertBefore(元素);} 别的 {error.insertBefore(元素);}}});});

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

谢谢

解决方案

我为您的问题在 label 中添加了一个 class 以便更轻松地找到...

您最喜欢的电影类型是什么?<span>*</span></label>

然后您只需要练习DOM 遍历"技术即可.在此处研究方法.

• $(element).parents('div') 查找 element 的 div 容器.

• 然后 .prev($('.question')) 带你到 .question，它是这个 div 的第一个前一个兄弟.

将所有内容放在一起，它会在问题后立即插入错误消息.

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

在errorPlacement内:

errorPlacement:函数(错误，元素){if (element.attr("type") == "checkbox") {error.insertAfter($(element).parents('div').prev($('.question')));} 别的 {//如果不是复选框，则为其他内容}}

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

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

errorPlacement:函数(错误，元素){error.insertAfter($(element).parents('div').prev($('.question')));}

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

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

解决方案

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.

这篇关于jQuery 验证插件错误放置复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！