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

Posted 2023-02-18

【中文标题】带有 display:none 表单元素的 jquery 验证器插件

【英文标题】：jquery validator plugin with display:none form elements

【发布时间】：2012-08-31 17:58:32

【问题描述】：

我正在使用 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>

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

【问题讨论】：

请不要将接受的答案放在您的问题中。问题和答案应该分开。

没问题，还没习惯这个地方

jQuery Validate - Enable validation for hidden fields的可能重复

【参考方案1】：

来自jQuery Validate的1.9.0变更日志：

已修复 #189 - :hidden 元素现在默认被忽略

要重新打开它，只需执行以下操作：

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

确保在您调用代码中的实际验证插件之前显示此内容。

我希望这会有所帮助！

【讨论】：

啊，谢谢。这很好用。我会用这个代替。

@lcplusplus 没问题；很高兴我能帮上忙。

为什么是空数组，而不是空字符串？

【参考方案2】：

我喜欢@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)
);

【参考方案3】：

您是否尝试将样式属性添加到输入元素？所以不要用 div 包装它，尝试：

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

【讨论】：

没关系，一分钟的空白。这是我解决它的方法：

我正在使用 django ModelForms，我忘了说我主要验证选择选项列表。

【参考方案4】：

你可以做两件事。

1) 您可以为这个输入字段静态设置值，不会通过验证，例如

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

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

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

【讨论】：

我的意思是验证器甚至不识别该字段，而不是验证过程本身。

嗯，我看到了你修复它的方式。无论如何，很高兴看到你找到了解决方案。

【参考方案5】：

解决此问题的另一种形式是将display: none 更改为visibility: hidden。

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