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之浮动窗口实现代码(两种方法)
Sep 08 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
javascript常见操作汇总
Sep 03 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 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环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
PHP开发过程中常用函数收藏
2009/12/14 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
jquery 可排列的表实现代码
2009/11/13 Javascript
js 代码优化点滴记录
2012/02/19 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
javascript求日期差的方法
2016/03/02 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
python顺序执行多个py文件的方法
2019/06/29 Python
Python流程控制 while循环实现解析
2019/09/02 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
优秀毕业生求职信范文
2014/01/02 职场文书
食品采购员岗位职责
2014/04/14 职场文书
白莲教口号
2014/06/18 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
美术教师个人总结
2015/02/06 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
春节随笔
2015/08/15 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android