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 相关文章推荐
简单JS代码压缩器
Oct 12 Javascript
预加载css或javascript的js代码
Apr 23 Javascript
Javascript Object.extend
May 18 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
node使用request请求的方法
Dec 20 Javascript
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的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
angular十大常见问题
2017/03/07 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
跟老齐学Python之dict()的操作方法
2014/09/24 Python
解析Python中的异常处理
2015/04/28 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
python中__call__内置函数用法实例
2015/06/04 Python
python使用turtle绘制分形树
2018/06/22 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
会计专业毕业生自我评价
2013/09/25 职场文书
高中的职业生涯规划书
2013/12/28 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
趣味运动会简讯
2015/07/20 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP