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 相关文章推荐
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 Javascript
vue 自定义组件的写法与用法详解
Mar 04 Javascript
vue组件中实现嵌套子组件案例
Aug 31 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 Javascript
浅谈Web Storage API的使用
Jun 23 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
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
php cookis创建实现代码
2009/03/16 PHP
PHP 文件上传全攻略
2010/04/28 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
JavaScript小技巧 2.5 则
2010/09/12 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
基于vue的验证码组件的示例代码
2019/01/22 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
Python正则表达式的使用范例详解
2014/08/08 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
python开发入门——列表生成式
2020/09/03 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
校园安全标语
2014/06/07 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
平安建设汇报材料
2014/12/29 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
安全教育主题班会教案
2015/08/12 职场文书
学困生转化工作总结
2015/08/13 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python