BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析


Posted in Javascript onDecember 01, 2016

问题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:

我们往往会有这样的需求,如下图:

BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析

在选择商品之后会在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对于隐藏域验证和程序赋值即时验证的问题浅析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
javascript 尚未实现错误解决办法
Nov 27 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
Angularjs过滤器使用详解
May 25 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 #Javascript
jsTree使用记录实例
Dec 01 #Javascript
Vue.JS入门教程之列表渲染
Dec 01 #Javascript
Vue.JS入门教程之处理表单
Dec 01 #Javascript
利用js获取下拉框中所选的值
Dec 01 #Javascript
js微信扫描二维码登录网站技术原理
Dec 01 #Javascript
Bootstrap的class样式小结
Dec 01 #Javascript
You might like
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
Python3中exp()函数用法分析
2019/02/19 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
企业管理专业个人求职信范文
2013/09/24 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
节能标语大全
2014/06/21 职场文书
推普周活动总结
2014/08/28 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
CSS基础详解
2021/10/16 HTML / CSS
详解JAVA的控制语句
2021/11/11 Java/Android
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS