带有display:none表单元素的jquery验证器插件

时间:2012-09-06 20:48:23

标签: jquery plugins block validation

我正在使用找到here的验证程序插件来验证表单。

我遇到的问题是,如果我将以下内容放在表单输入元素周围,则验证失败:

<div style="display:none;"><input type="text" name="test" /></div>

我需要这个,因为我正在为输入元素使用其他UI控制层,并且不希望它们可见。

它适用于内联和块元素,但我需要隐藏它。无论如何要解决这个问题吗?

感谢您的反馈

更新

我主要用django验证选择选项字段(即:{{form.select_option_element}})

如此有效:

<div style="display:none;">
    {{form.select_option_element}}
</div>

...无效

发布后我似乎用以下方法解决了这个问题:

<div style="visibility: hidden; height: 0;">
     {{form.select_option_element}}
</div>

然后它允许我验证该字段。

5 个答案:

答案 0 :(得分:47)

jQuery Validate的1.9.0更改日志:

  
      
  • 修正了#189 - 隐藏元素现在默认被忽略
  •   

要重新打开它,只需执行以下操作:

$(document).ready(function(){    
    $.validator.setDefaults({
        ignore: []
    });
});

确保在您的代码中调用实际验证插件之前出现

我希望这有帮助!

答案 1 :(得分:3)

我喜欢@dSquared的答案,但不幸的是'ignore'-property将被重置为页面上每个表单的验证器。在某些情况下,它不需要。

我用这种方式:

$(document).ready(function () {

    var $form = $("#some-form");

    $form.validate().settings.ignore = []; // ! Say to validator dont ignore hidden-elements on concrete form.

    $('#button-send').click(function () {
        if ($form.valid()) { .. }
    });

    // !! apply plugin's initializers which will hide origin elements (it can be CLEditor or Choosen plugins)
});

答案 2 :(得分:1)

您是否尝试将style属性添加到input元素?因此,不要用 div 包装它,请尝试:

<input type="text" name="test" value="" style="display: none;" />

答案 3 :(得分:0)

你可以做两件事。

1)您可以静态设置值,对于此输入字段(如

),验证不会失败
<div style="display:none;"><input type="text" name="test" value="default" /></div>

2)如果你想在验证方法中否定这个值。

如果您能提供更详细的代码,我将不胜感激。

答案 4 :(得分:0)

解决此问题的另一种方法是将display: none更改为visibility: hidden

例如:<input type="text" name="test" value="" style="visibility: hidden;" />