表单提交时要点击两次按钮(Validform验证)才能成功的解决方法
来源:互联网 发布:fzl什么意思网络用语 编辑:程序博客网 时间:2024/06/02 03:41
原因分析:
因为表单控件中含有ajax验证,所以在点击提交按钮时,会先执行submit,但由于此时含有ajax验证的控件还未执行验证,所以并未提交成功,然后再执行控件的blur事件对控件内容进行验证,如果验证通过,那么此时再点击一次提交按钮就会提交成功。
解决方法:
修改验证的触发事件,Validform默认的验证触发事件是blur,可以修改为在触发keyup事件时进行验证,在用户输入时即时验证,那么在点击提交按钮时就可以不用再次验证,这时就可以直接提交成功。
如下:
修改前:
html:<div class="valGroup"> <div class="valGroup-item-1 inline-block"> <span>*</span> 短信验证码:</div> <div class="valGroup-item-2 formControls inline-block"> <asp:TextBox ID="txtTelCode" runat="server" CssClass="input-text-1" Width="200px" datatype="n6" ajaxurl="/tools/validreg.ashx?regType=validCode&ctype=2" nullmsg="请输入手机收到的短信验证码!" errormsg="验证码输入有误!" sucmsg="<font color='green'>恭喜您,验证成功!</font>"></asp:TextBox> <div style="display: inline-block; vertical-align: middle; margin-top: -2px; height: 38px;" id="divSend"> <a class="telcode" id="getCode" href="#">获取短信验证码</a> </div> </div> <div class="inline-block"> </div></div>js:$(function () { var valid_rule = $(".form-horizontal").Validform({ datatype: {//传入自定义datatype类型,可以是正则,也可以是函数(函数内会传入一个参数); "n6": /^\d{6}$/ }, tiptype: 2 });});$("#txtTel").blur(function () { $("#txtTelCode").attr("ajaxurl", "/tools/validreg.ashx?regType=validCode&ctype=2&phone=" + $('#txtTel').val());});
修改后:
html:<div class="valGroup"> <div class="valGroup-item-1 inline-block"> <span>*</span> 短信验证码:</div> <div class="valGroup-item-2 formControls inline-block"> <asp:TextBox ID="txtTelCode" runat="server" CssClass="input-text-1" Width="200px"></asp:TextBox> <div style="display: inline-block; vertical-align: middle; margin-top: -2px; height: 38px;" id="divSend"> <a class="telcode" id="getCode" href="#">获取短信验证码</a> </div> </div> <div class="inline-block"> </div></div>js:$(function () { var valid_rule = $(".form-horizontal").Validform({ datatype: {//传入自定义datatype类型,可以是正则,也可以是函数(函数内会传入一个参数); "n6": /^\d{6}$/ }, tiptype: 2 }); $("#txtTelCode").keyup(function () { var code = $(this).val(); valid_rule.addRule([{ ele: "#txtTelCode", datatype: "n6", ajaxurl: "/tools/validreg.ashx?regType=validCode&ctype=2&phone=" + $('#txtTel').val(), nullmsg: "请输入手机收到的短信验证码!", errormsg: "验证码输入有误!", sucmsg: "<font color='green'>恭喜您,验证成功!</font>" }]); });});
总结:虽然使用现成的插件很简单,比如文中的validform验证,但我们不可忽略的问题是任何东西都不是完美的,在使用过程中会出现各种各样的问题。尽管插件并非我们自己所写,但我们却可以在了解它的基础上作完善,不要因为这个插件不好用,而再去找个更好用的插件,事实证明既然它受这么多人追捧是有其自身确实实用的价值。简而言之,遇到问题就要解决它,而非逃避。
阅读全文
0 0
- 表单提交时要点击两次按钮(Validform验证)才能成功的解决方法
- asp.net控件RequiredFieldValidator验证FCKeditor提交两次才能成功的解决方法
- Form表单提交与Validform验证的那些事
- 表单验证validform的用法
- 关于bootstrapValidator 表单校验remote出现两次重复提交才能验证通过问题处理
- 表单验证插件Validform的使用方法
- 关于验证表单插件Validform的用法
- Validform表单验证
- Validform表单验证
- form表单验证validform
- validform表单验证
- 如何实现表单提交时,验证两次密码是否一致
- Fckeditor在.NET中用RequiredFieldValidator验证提交两次的解决方法
- Validform表单验证时可以为空,否则按照指定的格式验证
- Validform表单验证时可以为空,否则按照指定的格式验证
- jquery表单验证插件:Validform常用的验证规则
- (表单重复提交)jquery验证 通过时,提交按钮变灰,不通过时正常显示
- validform表单验证插件最终版
- Java技术常用设计模式(七)--- 装饰模式
- TCP/IP协议详解---概述
- iOS开发,plist文件读写那些事
- makefile,kconfig
- 【译】 AWK教程指南
- 表单提交时要点击两次按钮(Validform验证)才能成功的解决方法
- 算法 第四版 1.3.43 文件列表
- LintCode 532:Reverse Pairs
- iOS 如何边下载边显示图片
- 神经网络中的激活函数
- 监测局域网内设备的在线时长
- SwitchButton各种样式
- 关于Redis简介及Window下的分片集群java案例(二)
- 数字反序列输出