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