【问题标题】:JQuery validation plugin radio buttons "error display" when not valid无效时 JQuery 验证插件单选按钮“错误显示”
【发布时间】:2013-06-02 22:56:19
【问题描述】:

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

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

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

(能够通过点击单词来查看收音机)

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

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

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

【问题讨论】:

    标签: jquery jquery-plugins jquery-validate radio-button 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 选项指定在报告错误时环绕输入的元素类型。或者您可以使用highlightunhighlight 选项来提供您自己的添加和删除错误通知的功能。

    【讨论】:

    • 我用 span、div 和 em 测试了 errorElement,但它们都没有给出正确的显示。无论如何,谢谢你的回答。
    猜你喜欢
    • 2011-06-22
    • 2010-09-21
    • 2011-08-04
    • 2016-08-13
    • 2015-01-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多