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 词法作用域和闭包分析说明
Aug 12 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
浅谈JS的原型和继承
May 08 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 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 移除数组重复元素的一点说明
2008/11/27 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
linux中cd命令使用详解
2015/01/08 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
python关闭windows进程的方法
2015/04/18 Python
python基于ID3思想的决策树
2018/01/03 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
python3中rank函数的用法
2019/11/27 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
护理自荐信
2013/10/22 职场文书
专科毕业生自我鉴定
2013/12/01 职场文书
毕业生工作求职信
2014/06/30 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
python开发人人对战的五子棋小游戏
2022/05/02 Python