如何在字段模糊上验证整个表单，而不仅仅是模糊字段答案

【问题标题】：How to validate the entire form on field blur instead of just the blurred field如何在字段模糊上验证整个表单，而不仅仅是模糊字段
【发布时间】：2017-11-14 05:40:24
【问题描述】：

我有一个使用 jQuery 验证的表单，使用不显眼的验证来声明规则。目前我正在使用默认的提交行为，在提交表单之前没有验证模糊（验证表单中的每个字段），之后后续的模糊只验证模糊的字段。

我想更改此行为，以便在提交后，模糊单个字段重新验证整个表单，以便错误摘要保留在屏幕上，直到所有问题都得到解决。提交前的行为应该保持不变。

我根据其他 SO 答案尝试了以下 onfocusout 方法，但没有运气：

onfocusout: function(element, event) {
    $(element).valid();
}

和

onfocusout: function(element, event) {
    this.element(element);
}

【问题讨论】：

@Azim，绝对不是。 .valid() 方法不属于 .validate() 方法内部的任何地方，因为它可能导致无限递归。通常，.element() 是在 .validate()... 内部时的正确方法...但是，在这种情况下，您似乎无法使用此方法触发整个表单的验证。见：jqueryvalidation.org/Validator.element

标签： javascript jquery jquery-validate

【解决方案1】：

this.element(element) 和 $(element).valid() 都用于触发对单个元素的验证。在您的情况下，由于您尝试在 .validate() 或 .setDefaults() 方法的选项中应用此选项，因此您不能使用 .valid()，因为它可能会触发无限递归。

剩下.element()。但是，as per the docs，您只能在单个字段上使用它，而不是整个表单。

如何在字段模糊时验证整个表单，而不仅仅是模糊字段
我想改变这种行为......模糊单个字段会重新验证整个表单

解决方案是编写一个附加到所有相关输入元素的外部blur 事件处理程序，并触发附加到表单的.valid() 方法。编辑此通用示例中的选择器以适用于您的特定表单。

$('#myform input[type="text"]').on('blur', function() {
    $('#myform').valid();  // <- trigger validation on entire form
});

$('#myform input[type="text"]') 选择#myform 中的所有文本输入
$('#myform') selects theformbased onid="myform"`

【讨论】：

感谢这么详细的解释！由于我有超过 200 种不同的形式，我已经覆盖了验证器的默认 onfocusout，如果 this.submitted 为空，则只需执行 $(element.form).valid()，因此任何元素都将验证它碰巧处于的任何形式，只要没有初始提交表格。我已将相同的行为添加到默认的 onkeyup 所以验证消息。
只是对您的答案的更正/补充。鉴于validator = $("selector").validate()，您还可以使用validator.form() 来验证表单。见jqueryvalidation.org/Validator.form
@Arkni，是的，但是 validator.form() 方法在 .validate() 方法中使用时，也会导致无限递归。
@Sparky 您能否详细说明validator.form() 或$(form).valid() 如何导致无限递归？从代码的角度来看，我不明白这怎么可能。
@Arkni，因为每次验证元素时都会调用.validate() 内部的某些函数，例如errorPlacement、highlight、unhighlight 等。因此，当您从其中触发.valid() 时，它会再次触发.validate 内部的这些函数，然后再次调用.valid() 等。由于开发人员以this.element(element) 的形式提供了解决方法，因此您可以轻松地避免这种潜在的情况。