代码之家 › 专栏 › 技术社区 › KyleMit Steven Vachon

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

form-submit jquery-validate validation jquery javascript

KyleMit Steven Vachon · 技术社区 · 10 年前

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

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

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

问题是现在 无效form.validate 开火两次。

自 无效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>

我可以把它们保存到我的 无效form.validate ,但当表单有效时,这不会更新,而且还将我的双击代码与自定义错误代码严重耦合。如果稍后我取出自定义错误代码,我将不得不重写双击阻止。

有什么想法吗?

2 回复 | 直到 8 年前

Arivu 7 年前

您可以使用以下代码检查表单是否有效,而无需触发UI

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

KyleMit Steven Vachon 10 年前

您可以使用 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>