表单提交时要点击两次按钮(Validform验证)才能成功的解决方法

4 篇文章 0 订阅
1 篇文章 0 订阅

原因分析:
因为表单控件中含有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验证,但我们不可忽略的问题是任何东西都不是完美的,在使用过程中会出现各种各样的问题。尽管插件并非我们自己所写,但我们却可以在了解它的基础上作完善,不要因为这个插件不好用,而再去找个更好用的插件,事实证明既然它受这么多人追捧是有其自身确实实用的价值。简而言之,遇到问题就要解决它,而非逃避。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值