11

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

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

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

例子：

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

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

4

4 回答 4

15

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

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

 $('#myform').validate({
    onfocusout: function(element) {
        $(element).valid();
    }
});
于 2009-06-01T18:18:16.880 回答
6

实际上，我得到的默认行为是对focusout和keyup事件的验证，我在插件代码中将其视为默认行为。我必须禁用插件配置中的那些，以便仅在提交时获得验证。也许您应该发布一些代码......我认为情况并不完全清楚。

于 2009-06-01T12:23:58.943 回答
2

我想在罗伯特的回答中补充一点，您可以在默认设置中通过使用来执行此操作，setDefaults()因此它不依赖于利用 validate 方法的实际实例（通常不会通过不显眼的验证公开）。

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

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

带有急切评估的演示：（
将在标签后显示为必需）

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

$("form").validate();
input.error {
  border-color: red
}
<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>

普通演示
（在提交之前不会显示）

$("form").validate();
input.error {
  border-color: red
}
<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>

于 2015-01-21T03:20:14.760 回答
0

对我来说，添加 onfocusout 也不起作用。我试图通过 setDefaults 像 KyleMit 建议的那样通过 $('#myform').validate 添加它。

我最终使用的解决方案是为表单的不同字段添加一个额外的 keyup、blur 和 change 事件。我使用了一个类而不是一个 id 来保持逻辑的通用性。

$('body').on('keyup blur change', '.tovalidate input, .tovalidate select, .tovalidate textarea', function () { 
        $('.tovalidate').validate().checkForm(); 
});
于 2020-04-22T10:49:10.070 回答