JQuery验证插件单选按钮“错误显示”无效时

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选项来提供自己添加和删除错误通知的功能。