一周乱弹: jquery validate 手动触发方式

本文介绍了在jQuery Validate插件中如何手动触发验证,包括onkeyup和onfocusout事件的正确设置方法,以及使用valid()方法进行调用的示例代码。在使用onkeyup和onfocusout时需要注意避免出现'对象不支持“call”属性或方法'的错误。

jquery validate 手动触发方式
1,onkeyup 键盘离开
2,onfocusout 失去焦点
3,valid()方法手动调用
但如果直接按照文档中的用法来用onkeyup和onfocusout会出现:SCRIPT438: 对象不支持“call”属性或方法 这个错误
要写成:
onfocusout/onkeyup的默认值是false,如果需要开启对当前文本域的验证,则应该写成:

onfocusout: function(element) { $(element).valid(); }
onkeyup: function(element) { $(element).valid(); }

valid()就很好理解了,直接根据id或者其它元素选择器调用就可以了。

栗子:
HTML:

<form class="form-horizontal" role="form" id="type-reward-form-1" action="mvc/onDuty/onDuty_set_ondutyType.json" method="post">
                    <div class="well">
                        <div class="form-group">
                            <%--隐藏域--%>
                            <input type="hidden" name="id">
                                <%--类型--%>
                            <input type="hidden" name="type" value="1">
                                <%--角色报酬--%>
                            <input type="hidden" name="typeRewardJson" id="dailysJson">
                            <div class="col-sm-12">
                                <p><span>日常值班:</span>中午<input type="text" name="startTime" id="daily-start1-dutyTime" class="myInputWidth ">至<input type="text" name="endTime" id="daily-end1-dutyTime" class="myInputWidth "> &nbsp;&nbsp; &nbsp;&nbsp;
                                    晚上:<input type="text" name="startTime2" id="daily-start2-dutyTime" class="myInputWidth ">至<input type="text " name="endTime2" id="daily-end2-dutyTime"
                                                                                                              class="myInputWidth "></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <p>角色A:<input type="number"   name="dailyA" id="dailyA"   class="myInputWidth" required> 角色B:<input type="number" id="dailyB" name="dailyB" class="myInputWidth "> 角色C:<input type="number" id="dailyC" name="dailyC" class="myInputWidth "> 角色D:<input type="number" id="dailyD" name="dailyD" class="myInputWidth "> 角色E:<input type="number" id="dailyE" name="dailyE" class="myInputWidth ">
                                </p>
                            </div>
                        </div>
                    </div>
                </form>

JS:

    //验证类型报酬表单
        $("#type-reward-form-1").validate({
            onfocusout: function(element) {
                var res = $(element).valid();
                if(!res) {
                    $(element).css("border-color", "red");
                }else {
                    $(element).removeAttr("style");
                }
            },
            rules : {
                startTime : {
                    required : true
                },
                endTime : {
                    required : true
                },
                startTime2 : {
                    required : true
                },
                endTime2 : {
                    required : true
                },
                dailyA : {
                    required : true
                },
                dailyB : {
                    required : true
                },
                dailyC : {
                    required : true
                },
                dailyD : {
                    required : true
                },
                dailyE : {
                    required : true
                },
            },
        });
      //  或者点击保存时手动调用
      //提交表单
    function submitDutyInfo() {
            var dailyForm =  $("#type-reward-form-1").valid();//dailyForm 为布尔类型
          }  

效果:
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值