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 相关文章推荐
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
jQuery登陆判断简单实现代码
Apr 21 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
jQuery使用hide方法隐藏元素自身用法实例
Mar 30 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
javascript完美实现给定日期返回上月日期的方法
Jun 15 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
对vuex中store和$store的区别说明
Jul 24 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
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在线生成ico文件的代码
2007/10/09 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
js switch case default 的用法示例介绍
2013/10/23 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
js实现电灯开关效果
2021/01/19 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
详解python中的线程与线程池
2019/05/10 Python
python 并发下载器实现方法示例
2019/11/22 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
python2和python3哪个使用率高
2020/06/23 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
违反学校规定检讨书
2014/01/18 职场文书
运动会入场解说词
2014/02/07 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
个人校本研修方案
2014/05/26 职场文书
党员个人公开承诺书
2014/08/29 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
颐和园的导游词
2015/01/30 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书