bootstrapValidator對於隱藏域驗證和程式賦值即時驗證的問題
阿新 • • 發佈:2020-07-16
問題1:
如下程式碼:
<input type="hidden" name="productId"/>
$("#addForm").bootstrapValidator({ fields: { productId: { validators: { notEmpty: { message: '請選擇一個商品' } } } } });
這樣的配置並沒有在提交的時候對錶單元素productId進行驗證,那是因為bootstrapValidator預設配置對於“隱藏域(:hidden)、禁用域(:disabled)、那啥域(:not(visible))”是不進行驗證的。
解決方法:
$("#addForm").bootstrapValidator({ //excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的預設配置 excluded:[":disabled"],//關鍵配置,表示只對于禁用域不進行驗證,其他的表單元素都要驗證 fields: { productId: { validators: { notEmpty: { message: '請選擇一個商品' } } } } });
問題2:
我們往往會有這樣的需求,如下圖:
在選擇商品之後會在productName裡面展示商品名稱給使用者看,而在productId這個隱藏域裡面放一個商品的ID。
一般情況下這樣的操作是由程式來完成的,
$("input[name='productId']").val(data.productId);
bootstrapValidator這個外掛不能捕獲這樣的“程式賦值事件”,所以這裡不能達到驗證的效果,所以我們需要做一個小小的變通:
$("#addForm").bootstrapValidator({ //excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的預設配置 excluded:[":disabled"],//關鍵配置,表示只對于禁用域不進行驗證,其他的表單元素都要驗證 fields: { productId: { trigger:"change", //問題2.關鍵配置 validators: { notEmpty: { message: '請選擇一個商品' } } } } });
//賦值之後觸發一次“change”事件 $("input[name='productId']").val(data.productId).change();
這樣以後bootrapValidator會因為觸發了“change”事件,而捕獲,達到驗證的效果