jQuery validate 驗證radio實例
具體代碼如下所示:
<div class="row cl"> <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>優(yōu)惠券類型:</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">現(xiàn)金券</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">優(yōu)惠最高金額:</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的內(nèi)容可以在瀏覽器中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("操作失敗"); } }); } // 獲取優(yōu)惠券表單值 var getCouponParameter = function(){ var couponInfo = {}; couponInfo.id = couponId; //優(yōu)惠券活動名稱 couponInfo.couponName = $('#couponName').val(); //使用范圍 couponInfo.couponUsingRange = $("input[name='couponUsingRange']:checked").val(); //發(fā)放類型 couponInfo.sendCouponType = $("input[name='sendCouponType']:checked").val(); //使用平臺 couponInfo.platformId = $("input[name='platformId']:checked").val(); //優(yōu)惠券類型 couponInfo.couponType = $("input[name='couponType']:checked").val(); //優(yōu)惠券使用限制 couponInfo.meetPrice = $('#meetPrice').val(); //優(yōu)惠券面額 couponInfo.couponAmount = $('#couponAmount').val(); //活動起始時間 couponInfo.couponStartDate = $('#couponStartDate').val(); //活動結(jié)束時間 couponInfo.couponEndDate = $('#couponEndDate').val(); //優(yōu)惠券數(shù)量 couponInfo.couponNum = $('#couponNum').val(); //用戶領(lǐng)取優(yōu)惠券數(shù)量限制 couponInfo.limitGetNum = $('#limitGetNum').val(); //備注 couponInfo.remark = $('#remark').val(); return JSON.stringify(couponInfo); } $("input:radio[name='couponType']").click(function(){ //1.滿減券 2.折扣券 3.現(xiàn)金券 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; } });
上面為驗證并向后臺傳參數(shù),并且給radio綁定監(jiān)聽事件。
以上所述是小編給大家介紹的jQuery validate 驗證radio實例,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
jquery操作select詳解(取值,設(shè)置選中)
本篇文章主要是對jquery操作select(取值,設(shè)置選中)進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02jQuery powerFloat萬能浮動層下拉層插件使用介紹
支持hover, click, focus以及無事件觸發(fā);支持多達12種位置的定位,出界自動調(diào)整;支持頁面元素加載,Ajax加載,下拉列表,提示層效果,tip類效果等;可自定義裝載容器;內(nèi)置UI不錯的裝載容器;支持鼠標(biāo)跟隨等。2010-12-12jQuery CheckBox全選、全不選實現(xiàn)代碼小結(jié)
jQuery CheckBox全選、全不選實現(xiàn)代碼小結(jié),對于操作jquery的朋友可以參考下。2010-04-04jQuery ajax實現(xiàn)省市縣三級聯(lián)動
這篇文章主要為大家詳細介紹了jQuery ajax實現(xiàn)省市縣三級聯(lián)動的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03jQuery html()方法使用不了無法顯示內(nèi)容的問題
jquery中的html方法使用不了,只能用完最基本的innerHTML把內(nèi)容展示出來2014-08-08