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