详解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 相关文章推荐
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
根据出生日期自动取得星座的js代码
Jul 20 Javascript
Javascript倒计时代码
Aug 12 Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 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
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
ng-zorro-antd 入门初体验
2018/12/03 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
python解析html开发库pyquery使用方法
2014/02/07 Python
Python中的zipfile模块使用详解
2015/06/25 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
pandas如何处理缺失值
2019/07/31 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
python实现图像外边界跟踪操作
2020/07/13 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
与UNIX有关的几个名词
2015/09/17 面试题
教师评优事迹材料
2014/01/10 职场文书
药店主任岗位责任制
2014/02/10 职场文书
金融管理专业求职信
2014/07/10 职场文书
医生爱岗敬业演讲稿
2014/08/26 职场文书
西湖英语导游词
2015/02/06 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
分家协议书范本
2016/03/22 职场文书