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----文件操作
Jan 18 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
js实现删除json中指定的元素
Sep 22 Javascript
jQuery冲突问题解决方法
Jan 19 jQuery
利用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+mysql)
2007/11/23 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
Angularjs 基础入门
2014/12/26 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
详解Js中的模块化是如何实现的
2017/10/18 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
深入浅析python的第三方库pandas
2020/02/13 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
自动化专业个人求职信范文
2013/12/30 职场文书
公司授权委托书范文
2014/08/02 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL