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 三种创建对象的方法
Oct 16 Javascript
Ext.MessageBox工具类简介
Dec 10 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
Bootstrap如何创建表单
Oct 21 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
微信小程序音乐播放器开发
Nov 20 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.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
javascript IFrame 强制刷新代码
2009/07/23 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
Python字符串切片操作知识详解
2016/03/28 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
Python实现Linux监控的方法
2019/05/16 Python
python logging通过json文件配置的步骤
2020/04/27 Python
python爬虫容易学吗
2020/06/02 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
2014的自我评价
2014/01/13 职场文书
体育教师自我鉴定
2014/02/12 职场文书
第二次离婚起诉书
2015/05/18 职场文书
暂住证明怎么写
2015/06/19 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android