BootStrap Validator對(duì)于隱藏域驗(yàn)證和程序賦值即時(shí)驗(yàn)證的問(wèn)題淺析
問(wèn)題1:
如下代碼:
<input type="hidden" name="productId"/>
$("#addForm").bootstrapValidator({ fields: { productId: { validators: { notEmpty: { message: '請(qǐng)選擇一個(gè)商品' } } } } });
這樣的配置并沒(méi)有在提交的時(shí)候?qū)Ρ韱卧豴roductId進(jìn)行驗(yàn)證,那是因?yàn)閎ootstrapValidator默認(rèn)配置對(duì)于“隱藏域(:hidden)、禁用域(:disabled)、那啥域(:not(visible))”是不進(jìn)行驗(yàn)證的。
解決方法:
$("#addForm").bootstrapValidator({ //excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默認(rèn)配置 excluded:[":disabled"],//關(guān)鍵配置,表示只對(duì)于禁用域不進(jìn)行驗(yàn)證,其他的表單元素都要驗(yàn)證 fields: { productId: { validators: { notEmpty: { message: '請(qǐng)選擇一個(gè)商品' } } } } });
問(wèn)題2:
我們往往會(huì)有這樣的需求,如下圖:
在選擇商品之后會(huì)在productName里面展示商品名稱給用戶看,而在productId這個(gè)隱藏域里面放一個(gè)商品的ID。
一般情況下這樣的操作是由程序來(lái)完成的,
$("input[name='productId']").val(data.productId);
bootstrapValidator這個(gè)插件不能捕獲這樣的“程序賦值事件”,所以這里不能達(dá)到驗(yàn)證的效果,所以我們需要做一個(gè)小小的變通:
$("#addForm").bootstrapValidator({ //excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默認(rèn)配置 excluded:[":disabled"],//關(guān)鍵配置,表示只對(duì)于禁用域不進(jìn)行驗(yàn)證,其他的表單元素都要驗(yàn)證 fields: { productId: { trigger:"change", //問(wèn)題2.關(guān)鍵配置 validators: { notEmpty: { message: '請(qǐng)選擇一個(gè)商品' } } } } }); //賦值之后觸發(fā)一次“change”事件 $("input[name='productId']").val(data.productId).change();
這樣以后bootrapValidator會(huì)因?yàn)橛|發(fā)了“change”事件,而捕獲,達(dá)到驗(yàn)證的效果
以上所述是小編給大家介紹的BootStrap Validator對(duì)于隱藏域驗(yàn)證和程序賦值即時(shí)驗(yàn)證的問(wèn)題淺析,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- bootstrap——bootstrapTable實(shí)現(xiàn)隱藏列的示例
- BootStrap實(shí)現(xiàn)響應(yīng)式布局導(dǎo)航欄折疊隱藏效果(在小屏幕、手機(jī)屏幕瀏覽時(shí)自動(dòng)折疊隱藏)
- BootStrap的彈出框(Popover)支持鼠標(biāo)移到彈出層上彈窗層不隱藏的原因及解決辦法
- js設(shè)置控件的隱藏與顯示的兩種方法
- jquery和js實(shí)現(xiàn)對(duì)div的隱藏和顯示方法
- js點(diǎn)擊頁(yè)面其它地方將某個(gè)顯示的DIV隱藏
- javascript 控制 html元素 顯示/隱藏實(shí)現(xiàn)代碼
- 如何用js控制frame的隱藏或顯示的解決辦法
- js tr控制下面的tbody隱藏和顯示
- Bootstrap顯示與隱藏簡(jiǎn)單實(shí)現(xiàn)代碼
相關(guān)文章
Jquery顏色選擇器ColorPicker實(shí)現(xiàn)代碼
這里我要分享一個(gè)自己修改的顏色選擇器,有需要的朋友參考下2012-11-11js實(shí)現(xiàn)使用鼠標(biāo)拖拽切換圖片的方法
這篇文章主要介紹了js實(shí)現(xiàn)使用鼠標(biāo)拖拽切換圖片的方法,涉及javascript操作圖片實(shí)現(xiàn)輪播效果的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05學(xué)習(xí)drag and drop js實(shí)現(xiàn)代碼經(jīng)典之作
今天讀John Resig的Pro Javascript Techniques時(shí)候看到他書上給的一個(gè)關(guān)于drag and drop的例子, 合上書本自己寫一個(gè)簡(jiǎn)化版本的。大約20分鐘完成, 沒(méi)有考慮兼容firefox。整個(gè)代碼封裝成一個(gè)對(duì)象 也是借鑒書中的風(fēng)格。我覺(jué)得很好。2009-04-04微信小程序?qū)崿F(xiàn)吸頂效果的方法實(shí)例
在微信小程序的開(kāi)發(fā)中,經(jīng)常會(huì)有列表分類標(biāo)簽隨著界面滾動(dòng)吸頂?shù)男Ч?下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)吸頂效果的相關(guān)資料,需要的朋友可以參考下2021-08-08ie支持function.bind()方法實(shí)現(xiàn)代碼
在 google 一番技術(shù)資料后,發(fā)現(xiàn) firefox 原生支持一個(gè) bind 方法,該方法很好的滿足了我們的初衷,調(diào)用方法與 call 和 apply 一樣,只是定義完成后,在后期調(diào)用時(shí)該方法才會(huì)執(zhí)行,需要的朋友可以了解下2012-12-12微信小程序web-view無(wú)法打開(kāi)該頁(yè)面不支持打開(kāi)的解決方法
小程序現(xiàn)在日漸成熟,功能也越來(lái)越強(qiáng)大,我們今天來(lái)一起看看小程序跳轉(zhuǎn)的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于微信小程序web-view無(wú)法打開(kāi)該頁(yè)面不支持打開(kāi)的解決方法,需要的朋友可以參考下2023-01-01JS實(shí)現(xiàn)可編輯的后臺(tái)管理菜單功能【附demo源碼下載】
這篇文章主要介紹了JS實(shí)現(xiàn)可編輯的后臺(tái)管理菜單功能,涉及javascript針對(duì)頁(yè)面元素的遍歷及動(dòng)態(tài)修改相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09js 獲取html5的data屬性實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js 獲取html5的data屬性實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07