Jquery验证错误放置(单选按钮)
Jquery validation error placement (radio buttons)
我试图使用Jquery验证插件来验证我的表单。我有错误消息出现在我的大多数输入元素的右边,但单选按钮给我什么都没有,但麻烦。
如果我不给div.group类的宽度,错误信息出现在整个页面的外部(因为我假设div宽度是页面的100% ?)不做任何事情会导致错误消息出现在第一个单选按钮之后,而不是第二个。我不能硬编码一个宽度,因为我想在几个宽度的无线电组上使用它。我怎样才能让它出现在单选按钮结束的地方呢?
谢谢!
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>
也许只是一种让错误信息出现在组中的最后一个单选按钮之后的方法?如果我能得到最后一个元素的句柄,我就可以相应地改变偏移量。
编辑:啊哈,我刚才用了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);
}
},
甚至不需要JS errorPlacement来做…如果只是为单选按钮放置一个标签,也可以像这样工作:
<label class="label_radio" for="answerswer_A">
<input id="answerswer_A" name="answerswers[question1].choiceArray" type="radio" value="A"/>Yes
</label>
<label class="label_radio" for="answerswer_B">
<input id="answerswer_B" name="answerswers[question1].choiceArray" type="radio" value="B"/>No
</label>
<label for="answerswers[question1].choiceArray" class="error" style="display:none;">* Please pick an option above</label>
Jquery验证插件将自动取消隐藏,并显示"required"消息
使用一些CSS:
#myform div.group label.error {float:right;padding-left:10px;}
试试这个。它将错误置于引发错误的对象之前。如果您按要求设置第一个单选按钮,这将起作用。为了保持一致性,我选择对所有输入类型执行此操作,但是您也可以稍微调整一下脚本,以便仅在radiogroup验证失败时执行此操作。
$('form').validate({
errorPlacement:
function(error, element){
var id=element[0]['id'];
$( element ).before( "<label for='"+id+"' class='error'>"+error.text()+"</label>" );
}
});
相关文章:
- 客户端单选按钮列表验证
- 在单选按钮验证中同时显示错误消息
- javascript单选按钮验证,适用于chrome,不适用于IE
- 单选按钮验证:我可以验证它,但我不知道原因
- javascript中的单选按钮验证错误
- Javascript单选按钮验证错误弹出不到一秒钟,但不应消失
- 欧芹.js根据选定的单选按钮验证表单的各个部分
- 单选按钮验证错误
- JavaScript 中的 HTML 单选按钮验证问题
- AngularJS单选按钮验证
- 单选按钮验证
- 如何修复jQuery插件中的单选按钮验证
- Javascript单选按钮验证错误
- jQuery中的单选按钮验证
- jquery中的单选按钮验证
- 表单验证单选按钮验证
- 单选按钮验证不起作用
- 多组单选按钮验证javascript
- 动态增加单选按钮验证
- 单选按钮验证