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：

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

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

默认功能的行为如下：

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

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

只需将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验证的情况下检查表单是否有效

2 个答案:

以下是Stack Snippets中的演示：