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