jQuery validate 验证radio实例

2020-05-22 17:09:02易采站长站整理

具体代码如下所示:


<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();