博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
bootstrapValidator对于隐藏域验证和程序赋值即时验证的问题
阅读量:7216 次
发布时间:2019-06-29

本文共 1492 字,大约阅读时间需要 4 分钟。

问题1:

如下代码:

$("#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”事件,而捕获,达到验证的效果

 

转载于:https://www.cnblogs.com/Brose/p/bootstrapValidator_hiddeninput.html

你可能感兴趣的文章
你属于程序员中的哪种人?
查看>>
基于Mixin Network的PHP比特币开发教程 之一:创建机器人
查看>>
时序数据库连载系列: 时序数据库一哥InfluxDB之存储机制解析
查看>>
sorl实现商品快速搜索
查看>>
Webpack4 学习笔记 - 01:webpack的安装和简单配置
查看>>
236. Lowest Common Ancestor of a Binary Tree
查看>>
300. Longest Increasing Subsequence
查看>>
GO基础编程-自定义函数
查看>>
你真的懂switch吗?聊聊switch语句中的块级作用域
查看>>
从0到1,了解NLP中的文本相似度
查看>>
HTML5新特性总结
查看>>
超越时代的天才——图灵
查看>>
使用 ale.js 制作一个小而美的表格编辑器(2)
查看>>
mybatis常用标签和动态查询
查看>>
以太坊交易源码分析
查看>>
React组件常用设计模式之Render Props
查看>>
多多客DOODOOKE更新插件&模块及下载附件教程
查看>>
js简单倒计时
查看>>
手把手教你React(一)JSX与虚拟DOM
查看>>
snabbdom源码解析(七) 事件处理
查看>>