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对于隐藏域验证和程序赋值即时验证的问题浅析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这里我要分享一个自己修改的颜色选择器，有需要的朋友参考下2012-11-11
这篇文章主要介绍了js实现使用鼠标拖拽切换图片的方法,涉及javascript操作图片实现轮播效果的相关技巧,非常具有实用价值,需要的朋友可以参考下2015-05-05
今天读John Resig的Pro Javascript Techniques时候看到他书上给的一个关于drag and drop的例子, 合上书本自己写一个简化版本的。大约20分钟完成， 没有考虑兼容firefox。整个代码封装成一个对象 也是借鉴书中的风格。我觉得很好。2009-04-04
这篇文章主要为大家详细介绍了原生js实现弹幕效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
在微信小程序的开发中,经常会有列表分类标签随着界面滚动吸顶的效果,下面这篇文章主要给大家介绍了关于微信小程序实现吸顶效果的相关资料,需要的朋友可以参考下2021-08-08
干前端这行当已经超过一个月了, 每天都会遇到新奇古怪, 甚至离奇的问题. 虽然绝大部分都是一些小问题, 但我觉得还是有必要记录下来2011-05-05
在 google 一番技术资料后，发现 firefox 原生支持一个 bind 方法，该方法很好的满足了我们的初衷，调用方法与 call 和 apply 一样，只是定义完成后，在后期调用时该方法才会执行,需要的朋友可以了解下2012-12-12
微信小程序web-view无法打开该页面不支持打开的解决方法
小程序现在日渐成熟,功能也越来越强大,我们今天来一起看看小程序跳转的问题,下面这篇文章主要给大家介绍了关于微信小程序web-view无法打开该页面不支持打开的解决方法,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了JS实现可编辑的后台管理菜单功能,涉及javascript针对页面元素的遍历及动态修改相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2016-09-09
下面小编就为大家带来一篇js 获取html5的data属性实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最新评论