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 相关文章推荐
一些有关检查数据的JS代码
Sep 07 Javascript
JavaScript中的Array对象使用说明
Jan 17 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
js+css实现全屏侧边栏
Jun 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 DOS攻击实现代码(附如何防范)
2012/05/29 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
Python中对列表排序实例
2015/01/04 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
探究python中open函数的使用
2016/03/01 Python
python 调用c语言函数的方法
2017/09/29 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
妇产科护士自我鉴定
2013/10/15 职场文书
大四自我鉴定
2014/02/08 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
2014年度工作总结报告
2014/12/15 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
Python中requests库的用法详解
2022/06/05 Python