我正在尝试使用 Jquery 验证插件来验证我的表单。我的大多数输入元素的右侧都会出现错误消息,但单选按钮只会给我带来麻烦。
如果我没有给出 div.group 类的宽度,错误消息会出现在整个页面的外部(因为我假设 div 宽度是页面的 100%?)不执行任何操作会导致出现错误消息在第一个单选按钮而不是第二个单选按钮之后。我无法对宽度进行硬编码,因为我想在多个宽度的单选组上使用它。我怎样才能让它出现在单选按钮中单选按钮结束处的右边缘?
Thanks!
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);
}
});
And then
<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>
也许只是一种让错误消息出现在组中最后一个单选按钮之后的方法?如果我可以获得最后一个元素的句柄,我可以相应地更改偏移量。
编辑:啊哈,我刚刚使用了 div.group{display:inline-block;}。
您还可以使用此方法在任意位置为特定字段放置错误。
errorPlacement: function(error, element) {
if (element.attr("name") == "PhoneFirst" || element.attr("name") == "PhoneMiddle" || element.attr("name") == "PhoneLast") {
error.insertAfter("#requestorPhoneLast");
} else {
error.insertAfter(element);
}
},
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)