BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑


Posted in Javascript onSeptember 05, 2019

BootStrapValidator表单验证插件的坑还真不少,又让我碰上一个...

BootStrapValidator验证的表单中只可有一个 type="submit" 的按钮。 我这样写了之后 (代码如下) ,点击其它按钮仍会触发验证...

1.错误代码

//示意
<form>
  ...
  <button type="submit">提交</button>
  ...
  <button>重置</button>
  <button>取消</button>
  ...
</form>

一开始是写成这样的,但是 问题来了 ,点击其它的按钮也会触发 表单验证 ...

2.正确代码

//示意
<form>
  ...
  <button type="submit">提交</button>
  ...
  <button type="button">重置</button>
  <button type="button">取消</button>
  ...
</form>

这样写点击除 提交 外的按钮就可以避免触发验证了, <button> 标签的 type 属性有三个值,分别是 submit 、 button 和 reset ,在BootStrapValidator的验证表单中只能有一个 type=submit 的按钮, 如果 type 属性不写或为空,那么就会被自动识别为 type=submit ,点击时会触发验证。而 type=button 可以为多个,所以可以在不需要加验证的按钮给 type 属性设为 button 就好了。而 type=reset的按钮点击时也会触发验证。

总结

以上所述是小编给大家介绍的BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
详解Vue中的watch和computed
Nov 09 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 #Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 #Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 #Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 #Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 #Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 #Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 #Javascript
You might like
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
python实现批量修改图片格式和尺寸
2018/06/07 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
python实现转圈打印矩阵
2019/03/02 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
建筑工程专业毕业生自荐信
2013/10/19 职场文书
应聘美工求职信
2013/11/07 职场文书
校本教研工作方案
2014/01/14 职场文书
主持人演讲稿
2014/05/13 职场文书
校运动会广播稿300字
2014/10/07 职场文书
暑期工社会实践报告
2015/07/13 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
Python+DeOldify实现老照片上色功能
2022/06/21 Python