zoukankan      html  css  js  c++  java
  • 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的提交方式。
     
     
  • 相关阅读:
    从构建分布式秒杀系统聊聊限流特技
    轻快的VIM(三):删除
    shell中各种括号的作用()、(())、[]、[[]]、{}
    java的重写规则
    UNIX命令,统计当前目录(含子目录)下所有后缀为.log的文件中ERROR出现的行数
    linux下使用 du查看某个文件或目录占用磁盘空间的大小
    linux如何查看系统占用磁盘空间最大的文件及让文件按大小排序
    管道命令和xargs的区别(经典解释)
    JAVA 一个或多个空格分割字符串
    shell替换一个或多个空格为逗号
  • 原文地址:https://www.cnblogs.com/zhuani21/p/4164996.html
Copyright © 2011-2022 走看看