欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

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

时间:2021-01-24 11:07:34|栏目:JavaScript代码|点击:

还是表单验证的问题,发现如果表单内有使用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 验证器名称,如果未设置,所有字段验证器将会开启/关闭

上一篇:ECMA5数组的新增方法有哪些及forEach()模仿实现

栏    目:JavaScript代码

下一篇:javascript 解析后的xml对象的读取方法细解

本文标题:详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑

本文地址:http://www.codeinn.net/misctech/50255.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有