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实现的类flash菜单效果代码
May 17 Javascript
juqery 学习之五 文档处理 插入
Feb 11 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 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制作的意见反馈表源码
2007/03/11 PHP
如何设置mysql允许外网访问
2013/06/04 PHP
解析yii数据库的增删查改
2013/06/20 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
Python3安装Scrapy的方法步骤
2017/11/23 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
工厂厂长岗位职责
2013/11/08 职场文书
机修工工作职责
2014/02/21 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
委托证明范本
2014/11/25 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android