Question

我正在使用jQuery validation plugin来验证网页中的某些表单。除了一些单选按钮外，它的工作顺利。

我有以下代码：

$("#theForm").validate({
  "rules": {
    "r1" : "required"
  },
  "messages" : {
    "r1" : {
       "required" : "foo"
    }
  }
});
............
............
<input type="radio" name="r1" value="1" /> 
<input type="radio" name="r1" value="2" /> 
<input type="radio" name="r1" value="3" />

验证有效，但第一个和第二个单选按钮之间显示“foo”消息。那不行。我想在最后一个单选按钮之后找到它。

没问题我想，在最后一个单选按钮后添加我自己的标签：

<input type="radio" name="r1" value="1" /> 
<input type="radio" name="r1" value="2" /> 
<input type="radio" name="r1" value="3" />
<label for="r1" class="error" style="display:none">bar</label>

它可以工作，但会显示“bar”消息。我不希望这样，我希望我的所有消息都在验证规则内，所以我该怎么做？

如何在最后一个单选按钮之后放置错误消息并使其使用规则中的消息（即“foo”）？

Answer 1

您可以在设置选项时使用errorPlacement回调。 http://docs.jquery.com/Plugins/Validation/validate#toptions

errorPlacement: function(error, element) {
   if (element.attr('type') === 'radio') {
      error.insertAfter(
          element.siblings('input[type="radio"][name="' + element.attr('name') + '"]:last'));
   }
   else {
      error.insertAfter(element);
   }
}

Answer 2

只需将标签放在任何位置并使用errorPlacement函数：

errorPlacement: function(error, element) {
            if (element.attr("name") == "sample") {
                error.html($("#sampleErrorMessageBox"));
            } else {
                error.insertAfter(element);
            }
}

这对我有用。

http://jsfiddle.net/t53w17mj/

jQuery验证插件 - 单选按钮问题

2 个答案: