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 相关文章推荐
重定向实现代码
Nov 20 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
React组件对子组件children进行加强的方法
Jun 23 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
javascript实现雪花飘落效果
Aug 19 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 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中substr()与explode()函数用法分析
2014/11/24 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
php bootstrap实现简单登录
2016/03/08 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
自己的js工具 Event封装
2009/08/21 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
python list 合并连接字符串的方法
2013/03/09 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
python随机取list中的元素方法
2018/04/08 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
详解python 中in 的 用法
2019/12/12 Python
武汉某公司的C#笔试题面试题
2015/12/25 面试题
应聘面试自我评价
2014/01/24 职场文书
美术社团活动总结
2014/06/27 职场文书
2014年检验科工作总结
2014/11/22 职场文书
飞越疯人院观后感
2015/06/09 职场文书
签约仪式致辞
2015/07/30 职场文书
python自动化测试之Selenium详解
2022/03/13 Python