jquery validate组件导致表单onsubmit事件执行两次

这是今天在工作中遇到的一个问题。由于业务需要在原来表单提交时增加一段新的校验逻辑。

原来的逻辑如下(代码都做了简化):

在表单提交时,使用check方法校验

<form onsubmit= "return check();">

方法代码:

function check(){

if(...){

alert("xxx");

return false;

}

}

因为新增了一段逻辑,所以我新增了一个方法,调整了代码的结构:

< form onsubmit= "return newCheck();">

方法代码:

  function newCheck(){

    if(!check()){

      return false;

    }

    if(!myCheck(){

      return false;

    }

    return true;

  }

  

  function myCheck(){

    if(...){

alert("xxx");

return false;

    }

  }

但是当我测试的时候,提示出现了两次。

经过确认,方法执行了两次(这里花了一些功夫确认及了解原因,又去网上找了些相关的资料,但都无效,解决问题都是类似,从未知探索各种可能)。

后来想到页面使用了jquery validate组件做校验,是否和这个有关系呢,当时也是怀疑。

搜索相关内容找到jQuery.validate 中文API,其中有这样两个字段:

问题的原因:onsubmit Boolean 默认:true 是否提交时验证。好吧,就是它导致的。

(刚刚我自己从新看了一遍,我觉得这个方法应该是在提交表单的时候,调用validate,而不是调用validate时执行onsubmit的方法。不管怎样,我觉得query validate还是调用了onsubmit)

解决办法:submitHandler:通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交。(api后面都有类似如下附加代码片段)

      $(".selector" ).validate({

submitHandler: function(form) {

    $(form).ajaxSubmit();

}

})

好吧,copy过来用。

好吧,表单不提交了(因为上面的代码有问题,及时可以执行,也可能出现下面死循环的问题)。。。继续查找submitHandler的用法。

找到了:jquery validate submitHandler 提交导致死循环。写的真不错。正好拿过来用。

删除form表单中的onsubmit,然后在jquery validate相关代码内加:

submitHandler:function(form){

if(newCheck()){

form.submit();

}

}

问题解决。

这是一个遇到未知问题的解决过程,从各个可能的角度去探试。

开始我怀疑是哪里写重复了?

然后怀疑页面顶和底的两个保存按钮的原因?

又去运行线上代码复测这个问题,而且奇怪的是时好时坏,有时执行一次,有时两次。

到此仍然奇怪为什么返回false的时候,我写的代码会执行两次,而原代码执行一次,这里只是多了一层调用。按照顺序的想法代码在第一次false的时候就阻断了。

收获2点:

jquery validate 默认会调用onsubmit的方法,导致此方法调用两次,而且在方法返回false时,由于返回了,所以只有一次执行,很难发现校验通过时是执行两次。

jquery方式的表单提交会触发validate执行,所以在validate其内如果再用jquery的表单提交会死循环(验证了),此时应使用dom的提交方式。

时间: 2024-08-15 17:13:44

jquery validate组件导致表单onsubmit事件执行两次的相关文章

jQuery Validate【为表单提供了强大的验证功能,让客户端表单验证变得更简单】

jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 J?rn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUn

jQuery Validate 插件,表单验证功能

连接地址:http://www.w3cschool.cc/jquery/jquery-plugin-validate.html jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 Jör

jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因

jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏览器当中却无法进行验证就直接将表单提交了. 在网上查了一下原因,大多数文章表明原因是js代码书写不规范造成,也就是在验证表单的规则(rules)数组的最后多了个逗号.起初我也因为是这个原因于是查看了自己的代码发现确实有此问题于是就改正过来了. 但是在浏览器中查看后仍然不起作用,在百思不得其解时,想到

jquery validate插件高级表单验证

Validation(validate)插件提供了另一种方法来为一个表单添加验证,而不需要改变字段的HTML.此外,这个插件提供了广泛的附加选项来控制它如何工作.我们通过给validate()函数传递一个对象直接量来设置这些选项,其中包含了每个选项的单独对象.例如,要指定一条验证规则,我们包含了该规则的代码的一个对象.首先,紧跟着validation函数的第一个圆括号的后面,我们包含一个开始花括号,并且在函数的结束圆括号的前面,放置一个结束花括号. $('idOfForm').validate(

jquery.validate 使用--验证表单隐藏域

jQuery validate很不错的一个jQuery表单验证插件.升级到了1.9版的后,发现隐藏表单域验证全部失效,特别是在jquery.ui.tabs.min.js构造的Tabs里的验证. 是因为在1.9的changelog里有这么一句 changelog里 * Fixed #189 - :hidden elements are now ignored by default ignore: ":hidden", 解决办法: $(document).ready(function() 

jquery validate 一个注册表单的应用

先看页面 前端表单代码  register.html <form class="mui-input-group" id="regForm"> <div class="mui-input-row"> <label>账号</label> <input id='account' name="account" type="text" class="mu

jQuery Validate插件实现表单强大的验证功能

转自:http://www.jb51.net/article/76595.htm jQuery Validate插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 第一节:jQuery Validation让验证变得如此容易 一.官网下载jquery,和jquery validation plugin 二.引入文件 <script src="js/jquery-1

jQuery几个经典表单应用整理回顾

1.文本框获得(失去)焦点 当文本框获得输入焦点时,将该文本框高亮显示,算不得一个应用,只是一个小技巧,可以提高用户体验. [html] view plaincopy <span style="font-family:SimSun;font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

Jquery来对form表单提交(mvc方案)

来自:http://www.cnblogs.com/lmfeng/archive/2011/06/18/2084325.html 我先说明一下,这是asp.net mvc 里面的用法, Jquery来对form表单提交,下面是一个form表单,里面没有action字段,我们来用Jquery注册事件进行提交, <form method="post" id="documentForm">    <input type="hidden"