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选择器包含以下元素：

的display值为none。

是type="hidden"的表单元素。

将宽度和高度明确设置为0.

有一个隐藏的祖先，因此该元素不会显示在页面上。

如果您想更改它，则需要为ignore in the options object传递不同的值。

似乎导致混淆的一点是验证检查元素是否被隐藏。当表单提交时，jQuery-Validate将重新检查任何输入。在那时，您的忽略中的元素将被选择或不被选中。因此，如果在您按“提交”时某个元素可见，则会对其进行验证。

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

Stack Snippet演示

＆＃13;

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

＆＃13;

.hidden {
  display: none;

＆＃13;

<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>

＆＃13;

Answer 2

＆＃34;这违背了我一直在阅读的内容以及我在网络项目中所见证的内容。＆＃34;

不幸的是，您没有提供您正在描述的此替代行为的示例。我们只能看到你的演示，它完全按照设计工作。

任何人都能解释一下吗？

直到你向我们展示破损的版本。

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

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

引用OP评论：

我在项目中看到的是，如果在调用validate()方法时隐藏表单，并且表单变得可见，它仍然无法验证。但是，如果我在表单可见后调用validate()方法，则可以正常工作。

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

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

DEMO：https://jsfiddle.net/1v35f7L2/1/

FWIW，请确保您使用的是最新版本的jQuery和jQuery Validate插件。你的演示使用的是几年前的jQuery 1.6和jQuery Validate 1.11，它也有点旧。

jQuery验证不可见字段

2 个答案:

Stack Snippet演示