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下关于$.Ready()的分析
Dec 13 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
JavaScript高级程序设计之变量与作用域
Nov 17 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中die(),exit(),return的区别
2013/06/20 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
jquery表单验证使用插件formValidator
2012/11/10 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
Vue自定义指令详解
2017/07/28 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
跟老齐学Python之网站的结构
2014/10/24 Python
python爬虫之百度API调用方法
2017/06/11 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
Python中bisect的使用方法
2019/12/31 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
西尔斯百货官网:Sears
2016/09/06 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
销售会计岗位职责
2014/03/15 职场文书
效能风暴心得体会
2014/09/04 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫
Golang并发工具Singleflight
2022/05/06 Golang
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python