详解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 相关文章推荐
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
微信小程序 Storage更新详解
Jul 16 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 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
SONY SRF-M100的电路分析
2021/03/02 无线电
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
Javascript 面向对象特性
2009/12/28 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
Python 条件判断的缩写方法
2008/09/06 Python
python和shell变量互相传递的几种方法
2013/11/20 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
个人收入证明范本
2014/01/12 职场文书
软件项目实施计划书
2014/05/02 职场文书
校园环保建议书
2014/05/14 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
日元符号 ¥
2022/02/17 杂记