检查表单是不是有效而无需重新运行 jquery 验证

Posted 2023-05-09

【中文标题】检查表单是不是有效而无需重新运行 jquery 验证

【英文标题】：Check if form is valid without re-running jquery validation检查表单是否有效而无需重新运行 jquery 验证

【发布时间】：2015-04-25 08:24:38

【问题描述】：

使用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() 方法是否会在某处保留我可以检查该值而不是重新验证表单的错误数量。

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

$("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 中的元素中，但是当表单有效时这不会更新，并且我的双击代码与我的自定义错误代码非常耦合。如果我在以后取出自定义错误代码，我将不得不重写双击预防。

有什么想法吗？

【问题讨论】：

您绝对不必拥有另一个 submit() 处理程序。但是，由于您在技术上不需要submit，因此该插件会解决这个问题……请尝试使用click 处理程序。尽管如此，您也不应该需要click 处理程序...这里不需要捕获按钮。

你的标题是个谬论。如果不“运行”验证，您将无法确定表单是否有效。

@Sparky，你错误地引用了我的话。我的标题是关于在没有“re-running”验证的情况下知道表单是否有效。验证已经在事件处理程序触发之前立即发生。我不需要在 5 毫秒后重新验证。这肯定是在可能的范围内。这是demo of it happening in fiddle。我在问题中提到了这种可能性，但我觉得它不是很干净。

是的，我误解了您标题的措辞。但是，原因很明确，显然您已经自行解决了。

【参考方案1】：

您可以在不触发 UI 的情况下使用以下代码检查表单是否有效

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

【参考方案2】：

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