javascript 在不重新运行 jquery 验证的情况下检查表单是否有效

Check if form is valid without re-running jquery validation

提问by KyleMit

Using jQuery Validate, is there a way to determine if a form is valid without revalidatingthe form.

使用jQuery Validate，是否有一种方法可以在不重新验证表单的情况下确定表单是否有效。

Per this question on how to add a 'submitHandler' function when using jQuery Unobtrusive Validation?, I'm listening to the invalid-form.validateevent to show the user a custom error when the form has been validated and has errors.

根据这个关于如何在使用 jQuery Unobtrusive Validation 时添加“submitHandler”函数的问题？，我正在侦听该invalid-form.validate事件，以便在表单经过验证并出现错误时向用户显示自定义错误。

Per this question on how to prevent double click on submit, I'm disabling the submit button once the form has been submitted, but only if the form is valid, so the user can take corrective action and resubmit once the form is cleaned up.

根据有关如何防止双击提交的问题，一旦提交表单，我将禁用提交按钮，但前提是表单有效，因此用户可以采取纠正措施并在表单清理后重新提交。

The problem is now invalid-form.validatefires twice.

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

Since the invalid-form.validateevent fires before my form submission handler, I'll already know the number of errors. Does the .valid()method persist the number of errors somewhere that I can check against that value instead of revalidating the form.

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

Here's an example in stack snippets. Hit submit before filling in the required fields and you'll see two error messages.

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

$("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>

I could save them to the the element in my invalid-form.validate, but this won't update when the form is valid and also couples my double click code very heavily with my custom error code. If I take out the custom error code at some later date, I'll have to rewrite the double click prevention.

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

Any ideas?

有任何想法吗？

采纳答案by KyleMit

Instead of attaching an extra listener to the form submit, you can use the submitHandler:

您可以使用submitHandler：

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

用于在表单有效时处理实际提交的回调。

The default function behaves like this:

默认函数的行为如下：

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

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

注意：form指的是一个 DOM 元素，这样验证就不会再次触发。

Just pass in a submitHandlerto validate()and add the code to disable the button like this:

只需传入一个submitHandlertovalidate()并添加代码以禁用按钮，如下所示：

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

Just be careful doing anything to the form inside of the submitHandlercallback because it's easy to trigger a case of infinite recursion

对submitHandler回调内部的表单做任何事情都要小心，因为很容易触发无限递归的情况

Here's a demo in Stack Snippets:

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

回答by Arivu

You can use below code to check form is valid without triggering UI

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

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