javascript – 检查表单是否有效而不重新运行jquery验证

2023年5月15日 175次阅读

使用
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中的元素中,但是当表单有效时这不会更新,并且我的双击代码也非常依赖我的自定义错误代码.如果我稍后取出自定义错误代码,我将不得不重写双击预防.

有任何想法吗？

最佳答案 您可以使用
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>
点赞