jquery validate 验证radio

ゝ一世哀愁。 2022-07-13 19:20 197阅读 0赞

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"></span><pre name="code" class="html"><div class="row cl">  
        <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>优惠券类型：</label>  
        <div class="formControls col-xs-8 col-sm-9 skin-minimal">  
            <div class="radio-box">  
                <input name="couponType" type="radio" value="1" id="couponType_1" <#if couponInfo.couponType == 1>checked</#if>>  
                <label for="couponType_1">满减券</label>  
            </div>  
            <div class="radio-box">  
                <input type="radio" name="couponType" value="2" id="couponType_2" <#if couponInfo.couponType == 2>checked</#if>>  
                <label for="couponType_2">折扣券</label>  
            </div>  
            <div class="radio-box">  
                <input type="radio" name="couponType" value="3" id="couponType_3" <#if couponInfo.couponType == 3>checked</#if>>  
                <label for="couponType_3">现金券</label>  
            </div>  
        <label id="couponType-error" for="couponType" class="error"></label>  
        </div>  
    </div>  
      
    <div class="row cl" id="couponMax_div">  
        <label class="form-label col-xs-4 col-sm-3">优惠最高金额：</label>  
        <div class="formControls col-xs-8 col-sm-9">  
            <input type="text" class="input-text" placeholder="仅在折扣券的情况下填写" name="couponMax"  
                   id="couponMax" value="${couponInfo.couponMax}">  
        </div>  
    </div>

其中，自定义错误提示位置只需修改<label id="couponType-error" for="couponType" class="error"></label>所在的位置即可，id和for的内容可以在浏览器中F12查看到。

$("#form-member-add").validate({  
        rules:{  
            sendCouponType:{  
                required:true  
            },  
            platformId:{  
                required:true  
            },  
            couponType:{  
                required:true  
            }  
        },  
        onkeyup:false,  
        focusCleanup:true,  
        success:"valid",  
        submitHandler:function(form){  
            var couponInfo = getCouponParameter();  
            saveCouponInfo(couponInfo);  
        }  
    });  
      
    function saveCouponInfo(couponInfo){  
        $.ajax({  
           type:'POST',  
           url: "/coupon/save",  
           data: {  
               couponStr:couponInfo  
           },  
           async: false,  
           success: function(data){  
               if(data.code == 200){  
                    var index = parent.layer.getFrameIndex(window.name);  
                    parent.$('#btn_search').click();  
                    parent.layer.close(index);  
               }else layer.alert("操作失败");  
           }  
        });   
    }  
      
      
    // 获取优惠券表单值  
    var getCouponParameter = function(){  
        var couponInfo = {};  
        couponInfo.id = couponId;  
        //优惠券活动名称  
        couponInfo.couponName = $('#couponName').val();  
        //使用范围  
        couponInfo.couponUsingRange = $("input[name='couponUsingRange']:checked").val();  
        //发放类型  
        couponInfo.sendCouponType = $("input[name='sendCouponType']:checked").val();  
        //使用平台  
        couponInfo.platformId = $("input[name='platformId']:checked").val();  
        //优惠券类型  
        couponInfo.couponType = $("input[name='couponType']:checked").val();  
        //优惠券使用限制  
        couponInfo.meetPrice = $('#meetPrice').val();  
        //优惠券面额  
        couponInfo.couponAmount = $('#couponAmount').val();  
        //活动起始时间  
        couponInfo.couponStartDate = $('#couponStartDate').val();  
        //活动结束时间  
        couponInfo.couponEndDate = $('#couponEndDate').val();  
        //优惠券数量  
        couponInfo.couponNum = $('#couponNum').val();  
        //用户领取优惠券数量限制  
        couponInfo.limitGetNum = $('#limitGetNum').val();  
        //备注  
        couponInfo.remark = $('#remark').val();  
          
        return JSON.stringify(couponInfo);  
    }  
      
    $("input:radio[name='couponType']").click(function(){  
        //1.满减券      2.折扣券       3.现金券  
        var tt = $(this).val();  
        switch(tt){  
            case '1' :  
                $('#couponMax_div').hide();  
                break;  
            case '2' :  
                $('#couponMax_div').show();  
                break;  
            case '3' :  
                $('#couponMax_div').hide();  
                break;  
            default:  
                break;  
        }  
    });

上面为验证并向后台传参数，并且给radio绑定监听事件。