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

2019-07-03 00:23:18 阅读：278 来源： 互联网

标签：jquery javascript form-submit jquery-validate validation

使用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>

标签：jquery,javascript,form-submit,jquery-validate,validation
来源： https://codeday.me/bug/20190702/1361287.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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