Question

我正在项目中使用Jquery Validation插件。

默认情况下，插件会在单击提交按钮时验证输入。该行为是“懒惰的”，以便对用户不显眼。如果发现错误，则验证变为“急切”并在用户更正违规条目时验证输入。

有没有办法通过一个选项覆盖最初的“懒惰”行为？我在文档中找不到任何解决方案。

示例：

如果您查看此demo，您会注意到用户可以在表单中导航，留下空文本框，当用户点击提交时，这些文本框将无法通过验证。如果用户最初在电子邮件文本框中输入了无效的电子邮件地址，则在单击提交按钮之前不会突出显示该地址。之后，在每次按键和模糊事件时验证输入。这就是我想从一开始就激活的内容。

我理解插件创建者的设计选择，但我需要不同的行为。

Answer 1

感谢混乱对这个问题的指导：

要在jquery验证插件上启用急切验证，请将以下选项添加到validate函数中：

 $('#myform').validate({
    onfocusout: function(element) {
        $(element).valid();
    }
});

Answer 2

实际上，我得到的默认行为是focusout和keyup事件的验证，我在插件代码中看到它们是默认值。我必须在插件配置中禁用它们才能在提交时获得验证。也许您应该发布一些代码......我认为情况并不完全清楚。

Answer 3

我想补充罗伯特的答案，你可以使用setDefaults()在默认设置中执行此操作，因此它不依赖于点击验证方法的实际实例（通常不会通过不引人注意的验证来曝光。

只需使用一个函数覆盖onfocusout属性，该函数始终通过调用valid()方法来评估模糊元素：

// enable eager evaluation
$.validator.setDefaults({
    onfocusout: function (element) {
        $(element).valid();
    }
})

热切评估演示：
^{（标签显示后需要显示）}

＆＃13;

// enable eager evaluation
$.validator.setDefaults({
  onfocusout: function (element) {
    $(element).valid();
  }
});

$("form").validate();

＆＃13;

input.error {
  border-color: red
}

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>

<form >
  <input type="text" name="Name" required /><br/>
  <input type="text" name="Email" required /><br/>
  <input type="submit" value="Submit"/>
</form>

＆＃13;

正常演示
^{（在提交之前不需要显示）}

＆＃13;

$("form").validate();

＆＃13;

input.error {
  border-color: red
}

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>

<form >
  <input type="text" name="Name" required /><br/>
  <input type="text" name="Email" required /><br/>
  <input type="submit" value="Submit"/>
</form>

＆＃13;

Answer 4

对我来说，添加onfocusout也不起作用。我试图通过像KyleMit建议的setDefaults和通过$（'＃myform'）。validate添加它。

我最后使用的解决方案是在窗体的不同字段上添加一个额外的事件，包括击键，模糊和更改。我使用类而不是ID来保持逻辑通用。

$('body').on('keyup blur change', '.tovalidate input, .tovalidate select, .tovalidate textarea', function () { 
        $('.tovalidate').validate().checkForm(); 
});

Jquery Validation插件 - 您可以从选项中启用“急切”验证吗？

4 个答案: