jQuery 验证不可见字段

Question

我看到了很多关于这个的问题，但想澄清一下我的理解。这一切都始于我在弹出表单上设置 jQuery 验证。如果我在表单不可见时添加了 validate() 方法，则验证无效（直接提交）。如果我在表单元素可见后添加验证，一切都很好......验证触发并且不提交表单。

所以，我试图隔离这种行为，结果是这样的：

https://jsfiddle.net/KyleMit/ph8ue5j5/

这是HTML：

<form id="form" style="display: none;">
    <input type="text" name="name" id="name"  placeholder="Name" required="requited" /><br/>
    <input id="submit" class="button" type="submit" value="submit"/>
</form>

这是 JS：

$(function() {

    $('#form').validate({
        rules: {
            name: {
                required: true,
                minlength: 2
            }
        },
        messages: {
            name: {
                required: "Please enter your name",
                minlength: "Name should be more than 2 characters"
            }
        }
    });

    window.setTimeout(function() {
        $("#form").show() 
    }, 3000);

});

如果你运行这个，你会看到表格首先是不可见的。然后在 3 秒后，变得可见。这与我的弹出窗体的设置相同。

令我惊讶的是验证有效！这违背了我一直在阅读的内容以及我在我的网络项目中看到的内容。

谁能解释一下？

Answer 1

这取决于您使用的版本。 As of version 1.9.0、ignore: ":hidden"是默认选项，所以不需要显式设置。根据您查看答案的时间或使用的版本，您可能会看到不同的答案。

在您的示例中，您使用的是 v1.11.0，因此默认情况下应忽略隐藏元素。 :hidden 选择器包括以下元素：

have a display value of none.

are form elements with type="hidden".

have width and height are explicitly set to 0.

have an hidden ancestor, so the element is not shown on the page.

如果你想改变它，你需要为 ignore in the options object 传递一个不同的值。

似乎引起混淆的一点是验证检查元素是否隐藏的点。当表单提交时，jQuery-Validate 将重新检查所有输入。正是在这一点上，您忽略的元素将被选择或不被选择。因此，如果在您点击提交时某个元素是可见的，它将被验证。

尝试运行下面的示例。如果您在第一个元素有机会加载之前提交，您只会收到一个警告，即使两个输入都是必需的，因为第一个被排除在外，因为它是隐藏的。等到脚本显示第一个输入后再尝试提交，两个元素都会被包含。

堆栈代码段中的演示

$(function() {
    
    $('#form').validate({
      ignore: ':hidden'
    });
    
    window.setTimeout(function() {
        $('.hidden').show() 
    }, 4000);
    
});

.hidden {
  display: none;

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.min.js"></script>

<form id="form" >
  <input type="text" id="hidden"  name="hidden" placeholder="Originally Hidden" required="required" class="hidden" /><br/>
  <input type="text" id="visible" name="visible" placeholder="Originally Visible" required="required" /><br/>
  <input type="submit" id="submit" value="submit"/>
</form>

Answer 2

"This goes against what I have been reading and what I've witnessed in my web project."

很遗憾，您没有提供所描述的这种替代行为的示例。我们只能看到您的演示，它完全按照设计工作。

Can anyone explain this?

除非您向我们展示损坏的版本。

$('#form').validate({ ....

您可以将 .validate() 方法附加到隐藏表单，插件将准备好验证此表单。 只要调用.validate()时HTML存在，插件就会初始化并准备好进行表单验证。
如果表单域是隐藏的，或者如果表单域在内部一个隐藏的容器中，则不会对这些域进行验证。但是，这不会阻止您按照上面 #1 中所述在表单上初始化插件。只需使字段可见（在本例中为整个表单）即可验证它们。
您可以选择通过将 ignore 选项设置为 [] 来验证隐藏字段。但是，我不相信你问的是如何验证隐藏字段。

引用 OP 评论:

What I'm seeing in my project is if the form is hidden when the validate() method is called, and the form becomes visible, it still won't validate. But if I call the validate() method after the form is visible, it works.

The demo you've provided 与您描述的完全相反。

我下面的演示是您的变体。 .validate() 方法附加到隐藏表单。然后，当您单击按钮以显示表单时...验证已经开始工作。

演示：https://jsfiddle.net/1v35f7L2/1/

FWIW，请确保您使用的是最新版本的 jQuery 和 jQuery 验证插件。您的演示使用的是 jQuery 1.6，它已有数年历史，而 jQuery Validate 1.11 也有点旧。

jQuery 验证不可见字段

jQuery Validate Non-Visible Fields

javascript

jquery

jquery-validate

堆栈代码段中的演示