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对于隐藏域验证和程序赋值即时验证的问题浅析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
javascript 控制input只允许输入的各种指定内容
这篇文章主要介绍了通过javascript控制input只允许输入的各种指定内容,需要的朋友可以参考下2014-06-06
用javascript调出windows色版的代码...2007-07-07
这篇文章主要介绍了JS 9个Promise面试题，对异步Promise感兴趣的同学，可以参考下2021-05-05
相信很多小伙伴在一些短视频平台上传视频的时候,系统会自动帮我们生成一些视频中的画面帧的图片,让我们作为视频封面的功能,那么这些短视频平台是如何从视频中抽取关键帧来作为封面,今天博主就带着大家一起来探讨这个问题,感兴趣的小伙伴跟着小编一起来看看吧2025-04-04
移动设备分辨率五花八门虽然我们可以通过CSS3的media query来实现适配，但是这种做法并不能适配所有设备，这篇文章主要介绍了js动态计算移动端rem的解决方案，非常不错，感兴趣的朋友一起看看吧2016-10-10
JavaScript setTimeout和setInterval的使用方法 说明
两个函数都是可以用来实现一段时间后执行一段javascript代码的效果。两个函数都有两个参数，前面的都是执行表达式，后面的是隔的秒数。2010-03-03
JavaScript setinterval延迟一秒解决方案
这篇文章主要介绍了JavaScript setinterval延迟一秒解决方案,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了JavaScript对象的四种创建方法，首先我们通过确定一个对象的属性和方法展开主题相关内容，需要的小伙伴可以参考一下2022-08-08
这篇文章主要给大家介绍了关于JavaScript对象详解之js对象属性的添加的相关资料,在JavaScript中对象是通过键值对来存储数据的一种数据类型,可以通过直接给对象添加属性的方式来增加对象的属性,需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了基于js实现checkbox批量选中操作,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
最新评论