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 相关文章推荐
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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许愿墙模块功能分析
2013/06/25 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
vue 清空input标签 中file的值操作
2020/07/21 Javascript
Python中模块string.py详解
2017/03/12 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
python中set()函数简介及实例解析
2018/01/09 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
物理研修随笔感言
2014/02/14 职场文书
新年联欢会主持词
2014/03/27 职场文书
怀念母亲教学反思
2014/04/28 职场文书
高中团支书竞选稿
2015/11/21 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
PHP解决高并发问题
2021/04/01 PHP
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS