详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑


Posted in Javascript onSeptember 17, 2019

还是表单验证的问题,发现如果表单内有使用BootStrap-select的下拉选框,在重置表单内容时,会触发对下拉选框的验证,并且验证的提示不会被清除,仍然会存在。

1.HTML结构

<form id="validatorForm">
  ...
  <div class="form-group fieldValue-parDiv valideDiv">
    <select name="directPicker" id="selectDirect" class="form-control form-control28">
      <option value="fromEastToWest">自东向西</option>
      <option value="fromWestToEast">自西向东</option>
      <option value="fromSourthToNorth">由南往北</option>
      <option value="fromNorthToSourth">由北往南</option>
    </select>
  </div>
  ...
  <button type="button" id="resetForm">重置<button>
</form>

2.错误的重置按钮绑定事件

$('#resetForm').on('click', function () {
  //下拉选框初始化
  $("#selectDirect").selectpicker('deselectAll');
})

此时点击重置按钮只会将选框初始化,但是却会触发对下拉选框的验证,此前我们已经将选框重置,所以肯定是通不过验证得到,所以会出现红色的提示信息。那么如何将这些提示信息也去掉?

3.正确地重置按钮绑定事件

$('#resetForm').on('click', function () {
  //下拉选框初始化
  $("#selectDirect").selectpicker('deselectAll');

  //启用字段验证器
  $('#validatorForm').data('bootstrapValidator').enableFieldValidators('directPicker', true);
})

enableFieldValidators(field, enabled, validator)用来开启/关闭字段验证器。

参数(*为必填) 类型 描述
field* String 字段名称
enabled* Boolean 为true时开启字段验证器,为false时则关闭
validator String 验证器名称,如果未设置,所有字段验证器将会开启/关闭

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
基于jquery编写分页插件
Mar 07 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 #Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 #Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 #Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 #Javascript
小程序的上传文件接口的注意要点解析
Sep 17 #Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 #Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 #Javascript
You might like
PHP循环获取GET和POST值的代码
2008/04/09 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
python daemon守护进程实现
2016/08/27 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
python调用win32接口进行截图的示例
2020/11/11 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
《唯一的听众》教学反思
2014/02/20 职场文书
2014年底工作总结
2014/12/15 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
Python如何配置环境变量详解
2021/05/18 Python