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来定位
Feb 20 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
原生js+ajax分页组件
Jan 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 异常处理实现代码
2009/03/10 PHP
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
PHP chop()函数讲解
2019/02/11 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
在python中的socket模块使用代理实例
2014/05/29 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
python通过文件头判断文件类型
2015/10/30 Python
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
python去掉行尾的换行符方法
2017/01/04 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
重构Python代码的六个实例
2020/11/25 Python
python安装sklearn模块的方法详解
2020/11/28 Python
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
应届毕业生个人自荐信范文
2013/11/30 职场文书
学校岗位设置方案
2014/01/16 职场文书
学生打架检讨书1000字
2014/01/16 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
共产党员承诺书
2014/03/25 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
医学求职信
2014/05/28 职场文书
2014年派出所工作总结
2014/11/21 职场文书
超市督导岗位职责
2015/04/10 职场文书
行政复议决定书
2015/06/24 职场文书