BootStrap Validator對於隱藏域驗證和程式賦值即時驗證的問題淺析

問題1：

如下程式碼：

<input type="hidden" name="productId"/>

$("#addForm").bootstrapValidator({
fields: {
productId: {
validators: {
notEmpty: {
message: '请选择一个商品'
}
}
}
}
});

   

這樣的配置並沒有在提交的時候對表單元素productId進行驗證，那是因為bootstrapValidator預設配置對於「隱藏域：定義域（預設值） :disabled）、那啥域（:not(visible)）」是不進行驗證的。

解決方法：

$("#addForm").bootstrapValidator({
//excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默认配置
excluded:[":disabled"],//关键配置，表示只对于禁用域不进行验证，其他的表单元素都要验证
fields: {
productId: {
validators: {
notEmpty: {
message: '请选择一个商品'
}
}
}
}
});

   

問題2：

我們往往會有這樣的需求，如下圖：

我們往往會有這樣的需求，如下圖：

在給下個商品

在裡面給商品名稱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」事件，而捕獲，達到驗證的效果

以上所述是小編給大家介紹的BootStrap Validator對於隱藏域驗證域驗證程式碼即時驗證的問題淺析，希望對大家有幫助

🎜🎜🎜