在不重新运行jquery验证的情况下检查表单是否有效 [英] Check if form is valid without re-running jquery validation

问题描述

使用 jQuery Validate ，有没有办法确定表单是否有效而无需重新验证表格。

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

关于如何添加'submitHandler的问题'使用jQuery Unobtrusive Validation时的功能？，我正在收听 invalid-form.validate 事件，以便在表单出现时向用户显示自定义错误验证并有错误。

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

关于如何防止双击提交，我在表单提交后禁用提交按钮，但仅当表单有效时，用户才能采取纠正措施并在表单清理后重新提交。

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.

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

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

Since the invalid-form.validate event 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.

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

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>

我可以将它们保存到我的 invalid-form.validate 中的元素，但是当表单有效时它也不会更新将我的双击代码与我的自定义错误代码相结合。如果我稍后取出自定义错误代码，我将不得不重写双击预防。

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.

任何想法？

推荐答案

而不是附加一个额外的监听器表单提交，您可以使用 submitHandler ：

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

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

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

默认函数的行为如下：

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

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

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

只需将 submitHandler 传递给 validate（）并添加代码以禁用此按钮：

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

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

请小心对 submitHandler 回调因为触发无限递归的情况很容易

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

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

这篇关于在不重新运行jquery验证的情况下检查表单是否有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！