BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
更新时间：2016年12月01日 10:29:37 作者：嘿煤贵
这篇文章主要介绍了BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题的解决方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下
问题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”事件，而捕获，达到验证的效果
以上所述是小编给大家介绍的BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了JS实现checkbox互斥(单选)功能,涉及JavaScript针对页面元素属性的判断及动态操作相关实现技巧,需要的朋友可以参考下2019-05-05
代码折叠起来,使整段程序缩成一行,看起来清爽了许多。大家在使用Visual Studio环境进行开发时，可以把某个类或某个函数折叠起来，在很多网页上也有类似的功能，那到底是如何实现的呢？其实很简单，只要通过JavaScript就可以实现。2016-08-08
IE浏览器不支持getElementsByClassName的解决方法
这篇文章主要介绍了IE浏览器不支持getElementsByClassName的解决方法,本文的方法比较完美的解决了这个问题,需要的朋友可以参考下2014-08-08
本文向大家介绍了javascript中常见的3种获取元素的方法，分别是通过元素ID、通过标签名字和通过类名字来获取，并附上了示例，希望大家能够喜欢。2015-03-03
这篇文章主要介绍了微信小程序实现之手势锁功能的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
浏览器对于我们来说，可能是最熟悉的工具了。在我们的产品开发过程中，经常要考虑浏览器兼容问题，以适应不同的用户人群，同时也减少因浏览器兼容问题所带来的服务量。所以检测浏览器的版本及类型就是很重要的一件事了，下面来一起看看用Javascript如何实现。2016-08-08
这篇文章主要介绍了Bootstrap禁用响应式布局的实现方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
今天小编就为大家分享一篇使用js实现将后台传入的json数据放在前台显示，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
下面小编就为大家带来一篇浅谈JavaScript中小数和大整数的精度丢失。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了JavaScript享元模式原理与用法,结合实例形式总结分析了JavaScript享元模式基本概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-03-03
最新评论