检查表单是否有效，无需重新运行 jquery 验证

Question

使用 jQuery Validate，有没有一种方法可以确定表单是否有效 而无需重新验证 表单。

根据 how to add a 'submitHandler' function when using jQuery Unobtrusive Validation? 上的这个问题，我正在监听 invalid-form.validate 事件，以便在表单经过验证并出现错误时向用户显示自定义错误。

根据这个关于如何 prevent double click on submit 的问题，我将在提交表单后禁用提交按钮，但前提是表单有效，以便用户可以采取纠正措施并在提交后重新提交表单已清理。

现在的问题是 invalid-form.validate 触发了两次。

由于 invalid-form.validate 事件在我的表单提交处理程序之前触发，所以我已经知道错误的数量。 .valid() 方法是否会在某个地方保留错误数，我可以根据该值检查而不是重新验证表单。

这是堆栈片段中的示例。在填写必填字段之前点击提交，您将看到两条错误消息。

$("form").validate();

// show message on invalid submission
$("form").on("invalid-form.validate", function (event, validator) {
  var errors = validator.numberOfInvalids();
  if (errors) {
    alert('There is a problem with ' + errors + ' fields.');
  }
});

// prevent double click form submission
$('form').submit(function () {
  if ($(this).valid()) {
    $(':submit', this).attr('disabled', 'disabled');
  }
});

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

我可以将它们保存到我的 invalid-form.validate 中的元素中，但是当表单有效时这不会更新，并且还会将我的双击代码与我的自定义错误代码紧密结合在一起。如果我以后取出自定义错误代码，我将不得不重写防双击功能。

有什么想法吗？

Answer 1

您可以使用 submitHandler:

而不是将额外的侦听器附加到表单提交

Callback for handling the actual submit when the form is valid.

默认函数的行为如下：

submitHandler: function(form) {
  form.submit();
}

Note: form refers to a DOM element, this way the validation isn't triggered again.

只需将 submitHandler 传递给 validate() 并添加代码以禁用按钮，如下所示：

$("form").validate({
  submitHandler: function(form) {
    $(':submit', form).attr('disabled', 'disabled');
    form.submit();
  }
});

在 submitHandler 回调中对表单做任何事情都要小心，因为它很容易 trigger a case of infinite recursion

这是 Stack Snippets 中的一个演示：

$("form").validate({
  submitHandler: function(form) {
    $(':submit', form).attr('disabled', 'disabled');
    form.submit();
  }
});

// show message on invalid submission
$("form").on("invalid-form.validate", function (event, validator) {
  var errors = validator.numberOfInvalids();
  if (errors) {
    alert('There is a problem with ' + errors + ' fields.');
  }
});

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

Answer 2

您可以使用下面的代码来检查表单是否有效而不会触发 UI

$('#formId').validate().checkForm()

检查表单是否有效，无需重新运行 jquery 验证

Check if form is valid without re-running jquery validation

javascript

validation

jquery

jquery-validate

form-submit

这是 Stack Snippets 中的一个演示：