表单提交时需要点击2次提交按钮才能提交成功 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

表单提交时需要点击2次提交按钮才能提交成功

2016-06-16 18:26:39 2382 1

screenshot
用的是formValidator表单验证插件,当输入完成后点击提交,会先验证输入的是否正确,验证成功会出现对号但并没有提交表单,再点击一次才会成功提交,怎么做到点击时验证和提交同时进行。

$.formValidator.initConfig({formid:"myform",autotip:true});
   $("#mobile").formValidator({
        onshow:"请填写正确的手机号",
        onfocus:"手机号不能为空",
        oncorrect:'此手机号可以使用'
        }).regexValidator({ regexp: "^13[0-9]{1}[0-9]{8}$|15[0-9]{1}[0-9]{8}$|14[0-9]{1}[0-9]{8}$|18[0-9]{1}[0-9]{8}$", onError: "手机号码格式不正确" }).ajaxValidator({
                    datatype : "html",
                    async : true,
                    url : def.url+"reg_check_mobile",
                    success : function(data){
                        if(data==0){
                            $('#fs_moblies').attr('class','');
                            //$('.reg_button_form_js').attr('style','display:none;');
                            return true;
                        }else if(data==1){
                            return false;
                        }
                        else{
                            return false;
                        }
                    },
        error: function(XMLHttpRequest, textStatus, errorThrown){alert("服务器没有返回数据,可能服务器忙,请重试"+errorThrown);},
        onerror : "手机号已存在,请更换手机号",
        onwait : "正在验证,请稍候..."
    });
      $("#verify").formValidator({onshow:"请填写验证码",onfocus:"请填写验证码",oncorrect:'验证码正确'}).inputValidator({min:1,onerror:"请填写验证码"}).ajaxValidator({
        datatype : "html",
        async : true,
        url : def.url+"register_verify",
        success : function(data){
            if(data==0){
                return true;
            }else if(data==1){
                return false;
            }
            else{
                return false;
            }
        },  
        error: function(XMLHttpRequest, textStatus, errorThrown){alert("服务器没有返回数据,可能服务器忙,请重试"+errorThrown);},
        onerror : "验证码不正确",
        onwait : "正在验证,请稍候..."
    });
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:41:46

    插件具体我没去找它的代码来看
    但是基本可以确定:
    因为验证码的验证是异步的,使用AJAX
    当你填写完验证码来点击提交按钮的时候,执行的逻辑肯定是验证码输入框的blur事件,因为这个插件不可能傻到某一个待填项正确了就提交整个表单,因此在blur事件的异步验证没有返回前,后执行的submit事件一定会被这个插件阻止
    问题就出在这个时间差上,验证码输入框失焦后,异步的验证返回前,执行了submit动作,该动作被阻止,当第二次点击的时候,验证码的异步验证已经完成了,因此表单提交成功了

    我有一个解决方案,可以把验证码的异步验证改为onkeyup事件,最好是输入完最后一位开始验证,这样在你还没有点击提交按钮前,验证就已经完成,再点击提交按钮自然就成功了

    0 0
相关问答

1

回答

Nacos1.2.0 以上的客户端在 server 端升级到1.4.1版本时场景是什么样的?

2022-01-04 10:32:56 161浏览量 回答数 1

0

回答

findappleid.store 解析不成功

2019-03-21 10:54:49 201浏览量 回答数 0

0

回答

发信给澳洲的邮箱被退信了,之前可以发送;别的域名邮箱可以发送成功

2018-12-12 10:03:01 665浏览量 回答数 0

1

回答

邮箱解析不成功

2018-08-22 12:21:24 525浏览量 回答数 1

1

回答

邮箱解析不成功

2018-08-18 20:52:58 530浏览量 回答数 1

1

回答

非万网域名,解析企业邮箱不成功

2018-08-17 11:01:36 1128浏览量 回答数 1

3

回答

万网域名第一次解析成功一个地址大概需要多久?

2017-07-24 10:36:23 2092浏览量 回答数 3

1

回答

如何用一个按钮将form1先提交给1.htm后,成功了再把form2提交给2.htm

2016-07-12 15:29:58 1578浏览量 回答数 1

1

回答

html里如果输入框为空,则提交按钮不可用,反之可用怎么做呢?

2016-05-25 13:46:13 2046浏览量 回答数 1

1

回答

点击widget时,如何在主activity中调用一个程序

2016-02-15 16:09:34 1417浏览量 回答数 1
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载