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 相关文章推荐
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
JS实现商品倒计时实现代码
May 03 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 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自动反斜杠的函数代码
2010/01/05 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
javascript 页面划词搜索JS
2009/09/28 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
vue组件间通信解析
2017/03/01 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
React实现轮播效果
2020/08/25 Javascript
pandas多级分组实现排序的方法
2018/04/20 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
UGG英国官方网站:UGG UK
2018/02/08 全球购物
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
解决方案设计综合面试题
2015/08/31 面试题
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
大学生的应聘自我评价
2013/12/13 职场文书
活动经费申请报告
2015/05/15 职场文书
婚宴来宾致辞
2015/07/28 职场文书
Python上下文管理器Content Manager
2021/06/26 Python