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

Posted 2023-05-09

【中文标题】无效时 JQuery 验证插件单选按钮“错误显示”

【英文标题】：JQuery validation plugin radio buttons "error display" when not valid

【发布时间】：2013-06-02 22:56:19

【问题描述】：

我正在使用 Jquery 验证插件来检查是否在提交表单之前检查了收音机，它工作得很好..

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

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

（能够通过点击单词来查看收音机）

因此，当未检查收音机并添加错误消息时，一切都搞砸了，如下图所示：

消息应该出现在两个选项下

任何想法如何解决这个问题？

【参考方案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') );
    
   
);

【讨论】：

非常感谢，这是我正在寻找的解决方案 :)。但是现在当我检查收音机时，错误消息不会自动消失。你知道如何解决这个问题吗？

但只有在所有表单有效时才调用成功函数！一旦用户检查收音机，我需要它消失（这就是它最初的工作方式）

errorPlacement 应该可以正常工作，并在您输入文本/选择收音机等后自动隐藏错误消息。我猜您做错了其他事情。请检查。

查看更新后的帖子 - 效果很好。 JS fiddle 用于测试

【参考方案2】：

您可以使用errorElement 选项指定在报告错误时环绕输入的元素类型。或者您可以使用highlight 和unhighlight 选项来提供您自己的添加和删除错误通知的功能。

【讨论】：

我用 span、div 和 em 测试了 errorElement，但它们都没有给出正确的显示。无论如何，谢谢你的回答。