jqueryvalidate组件导致表单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组件做校验，是否和这个有关系呢，当时也是怀疑。
搜索相关内容到，其中有这样两个字段：
问题的原因：onsubmit Boolean 默认:true 是否提交时验证。好吧，就是它导致的。
（刚刚我⾃⼰从新看了⼀遍，我觉得这个⽅法应该是在提交表单的时候，调⽤validate，⽽不是调⽤validate时执⾏onsubmit的⽅法。不管怎样，我觉得query validate还是调⽤了onsubmit）
解决办法：submitHandler：通过验证后运⾏的函数,⾥⾯要加上表单提交的函数，否则表单不会提交。（api后⾯都有类似如下附加代码⽚段）      $(".selector" ).validate({
submitHandler: function(form) {
    $(form).ajaxSubmit();
}
})
好吧，copy过来⽤。
好吧，表单不提交了(因为上⾯的代码有问题，及时可以执⾏，也可能出现下⾯死循环的问题)。。。继
续查submitHandler的⽤法。
到了：。写的真不错。正好拿过来⽤。
删除form表单中的onsubmit，然后在jquery validate相关代码内加：
submitHandler:function(form){
if(newCheck()){
form.submit();
}
}
jquery是什么功能组件
问题解决。
这是⼀个遇到未知问题的解决过程，从各个可能的⾓度去探试。
开始我怀疑是哪⾥写重复了？
然后怀疑页⾯顶和底的两个保存按钮的原因？
⼜去运⾏线上代码复测这个问题，⽽且奇怪的是时好时坏，有时执⾏⼀次，有时两次。
到此仍然奇怪为什么返回false的时候，我写的代码会执⾏两次，⽽原代码执⾏⼀次，这⾥只是多了⼀层调⽤。按照顺序的想法代码在第⼀次false的时候就阻断了。
收获2点：
jquery validate 默认会调⽤onsubmit的⽅法，导致此⽅法调⽤两次，⽽且在⽅法返回false时，由于返回了，所以只有⼀次执⾏，很难发现校验通过时是执⾏两次。
jquery⽅式的表单提交会触发validate执⾏，所以在validate其内如果再⽤jquery的表单提交会死循环（验证了），此时应使⽤dom的提交⽅式。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。