Jquery验证错误放置(单选按钮) [英] Jquery validation error placement (radio buttons)
问题描述
我正在尝试使用Jquery验证插件来验证我的表单。我的大多数输入元素都出现了错误消息,但单选按钮只给我带来麻烦。
I'm trying to use the Jquery validation plugin to validate my form. I have error messages appearing to the right of most of my input elements, but radio buttons are giving me nothing but trouble.
如果我没有为div.group类提供宽度,则错误消息会出现在整页的外面(因为我假设div宽度为100)页面的百分比?)没有做任何事情导致错误消息出现在第一个单选按钮而不是第二个。我不能硬编码宽度,因为我想在几个宽度的无线电组上使用它。如何让它出现在单选按钮中的单选按钮结束的右边缘?
If I don't give a width for the div.group class, the error message appears on the outside of the full page (since I assume the div width is 100% of the page?) Not doing anything causes the error message to appear after the first radio button instead of the 2nd. I can't hardcode a width, since i want to use it on radio groups of several widths. How can I just make it appear at the right edge of wherever the radio buttons in the Radio buttons ends?
谢谢!
var validator = $("#myForm").validate({
errorElement: "div",
wrapper: "div", // a wrapper around the error message
errorPlacement: function(error, element) {
if (element.parent().hasClass('group')){
element = element.parent();
}
offset = element.offset();
error.insertBefore(element)
error.addClass('message'); // add a class to the wrapper
error.css('position', 'absolute');
error.css('left', offset.left + element.outerWidth());
error.css('top', offset.top);
}
});
然后
<p>
<div class="group">
<label>Gender</label>
Male: <input id="gender_male" type="radio" name="gender" class="required" value="Male" />
Female: <input id="gender_female" type="radio" name="gender" class="required" value="Female" />
</div>
也许只是在组中的最后一个单选按钮后出现错误消息的方法?如果我能得到最后一个元素的句柄,我可以相应地改变偏移量。
Maybe just a way to have the error message appear after the last radio button in the group? If I could get a handle to the last element, I could change the offset accordingly.
编辑:啊哈,我刚刚使用了div.group {display:inline-block; }。
Aha, I just used div.group{display:inline-block;}.
推荐答案
您还可以使用此方法在特定字段中的任何位置放置错误。
You can also use this method to place an error for a specific field wherever you want.
errorPlacement: function(error, element) {
if (element.attr("name") == "PhoneFirst" || element.attr("name") == "PhoneMiddle" || element.attr("name") == "PhoneLast") {
error.insertAfter("#requestorPhoneLast");
} else {
error.insertAfter(element);
}
},
这篇关于Jquery验证错误放置(单选按钮)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!