无效时，JQuery验证插件单选按钮"error display“

Question

我正在使用Jquery验证插件在提交表单之前检查是否检查了无线电，它工作得很好。

我的问题是错误消息的显示方式，我知道插件使用标签来显示每个输入的错误消息。但是我已经为这些单选元素使用了标签标记，如下所示：

<label><input type="radio" name="A2-3" value="Oui"> Oui </label>

(为了能够通过点击单词来检查无线电)

因此，当没有检查无线电并添加了错误消息时，所有的一切都会像下面的图片一样混乱：

​

该消息应显示在两个选项下

有什么办法解决这个问题吗？

Answer 1

您可以使用验证errorPlacement选项

举个例子：

JS小提琴：http://jsfiddle.net/6rGX5/5/

显示错误的html

<div class="form_field">
  <div class="error_message_holder"></div>
  <!-- your text field goes here -->
  <label>Field Name:</label>
  <input type="text" class="required" name="..." ...>
</div>

<!-- you can have other elements similar to above -->

和javascript

$('form').validate({
  errorPlacement: function(error, element) {
    error.html('your error message here');
    if(element.closest('.form_field').find('label.error').length == 0){
      error.insertBefore( element.closest('.form_field').find('.error_message_holder') );
    }
  } 
});

Answer 2

可以使用errorElement选项指定在报告错误时对输入进行换行的元素类型。或者，您可以使用highlight和unhighlight选项提供自己的函数来添加和删除错误通知。