Jqueryvalidation错误放置（单选按钮）

我正在尝试使用Jqueryvalidation插件来validation我的表单。 我的大多数输入元素都出现了错误消息，但单选按钮只给我带来麻烦。

如果我没有为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); } }); 

然后

 
 
 Gender Male:  Female:   

也许只是在组中的最后一个单选按钮后出现错误消息的方法？ 如果我能得到最后一个元素的句柄，我可以相应地改变偏移量。

编辑：啊哈，我刚刚使用了div.group {display：inline-block;}。

Answer 1

您还可以使用此方法在特定字段中的任何位置放置错误。

 errorPlacement: function(error, element) { if (element.attr("name") == "PhoneFirst" || element.attr("name") == "PhoneMiddle" || element.attr("name") == "PhoneLast") { error.insertAfter("#requestorPhoneLast"); } else { error.insertAfter(element); } }, 

Answer 2

甚至不需要JS errorPlacement来做它…如果只是为单选按钮放置一个标签也是这样的：

  Yes   No  * Please pick an option above 

Jquery Validation插件会自动取消隐藏它并显示“必需”的消息。

Answer 3

试试这个。 它将错误放在引发错误的对象之前。 如果您根据需要设置第一个无线电按钮，这将起作用。 为了保持一致性，我选择在所有输入类型上执行此操作，但您也可以稍微调整脚本以仅在无线电组validation失败时执行此操作。

 $('form').validate({ errorPlacement: function(error, element){ var id=element[0]['id']; $( element ).before( ""+error.text()+"" ); } }); 

Answer 4

只需使用一些CSS：

 #myform div.group label.error {float:right;padding-left:10px;}