bootstrapValidator對於隱藏域驗證和程序賦值即時驗證的問題

轉自:http://www.cnblogs.com/Brose/p/bootstrapValidator_hiddeninput.html

問題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”事件,而捕獲,達到驗證的效果


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章