jQuery 验证插件错误放置复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26041435/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Validation plugin errorPlacement for checkbox
提问by mOna
I use jQuery Validation plugin to validate my form. My problem is the place of error message for checkbox. please see this image:
我使用 jQuery 验证插件来验证我的表单。我的问题是复选框的错误消息的位置。请看这张图片：
This is html part related to checkboxes + jQuery Validation:
这是与复选框 + jQuery 验证相关的 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>
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
谢谢
回答by Sparky
I added a classto the labelfor your question in order to find that easier...
我添加了一个class到label，以便您的问题找到更简单...
<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.
然后你只需要练习你的“DOM遍历”技术。研究这里的方法。
$(element).parents('div')finds thedivcontainer of yourelement.Then
.prev($('.question'))gets you to the.questionthat is the first previous sibling of thisdiv.
$(element).parents('div')找到div您的element.然后
.prev($('.question'))将您带到.questionthis 的第一个前一个兄弟节点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：
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/
演示：http: //jsfiddle.net/sgsvtd6y/
Maybe you don't need the conditional, since that technique should work on all of your inputtypes.
也许您不需要条件，因为该技术应该适用于您的所有input类型。
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.
否则，如果您的 HTML 不同，那么您可以使用带有稍微修改的 DOM 遍历的条件。
