详解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 相关文章推荐
Add a Formatted Table to a Word Document
Jun 15 Javascript
js控制框架刷新
Aug 01 Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
jquery dataTable 获取某行数据
May 05 jQuery
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
原生JS实现汇率转换功能代码实例
May 13 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写入数据到CSV文件的方法
2015/03/14 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
朴素贝叶斯算法的python实现方法
2014/11/18 Python
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
python的keyword模块用法实例分析
2015/06/30 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Python理解递归的方法总结
2019/01/28 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
优质的学校老师推荐信
2013/10/28 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
新闻报道策划方案
2014/06/11 职场文书
学雷锋标语
2014/06/25 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
音乐之声观后感
2015/06/04 职场文书
警示教育片观后感
2015/06/17 职场文书
寒假生活随笔
2015/08/15 职场文书
学校团代会开幕词
2016/03/04 职场文书
Python学习开发之图形用户界面详解
2021/08/23 Python