详解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 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
ExtJS Window 最小化的一种方法
Nov 18 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 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
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
JSON在PHP中的应用介绍
2012/09/08 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
javascript实现数独解法
2015/03/14 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
vue3.0 上手体验
2020/09/21 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
appium+python adb常用命令分享
2020/03/06 Python
python3 xpath和requests应用详解
2020/03/06 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
python中的unittest框架实例详解
2021/02/05 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
应届生煤化工求职信
2013/10/21 职场文书
医科学校毕业生自荐信
2013/11/09 职场文书
无偿献血倡议书
2014/04/14 职场文书
单位工作证明格式模板
2014/10/04 职场文书
实习护士自荐信
2015/03/25 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js