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

还是表单验证的问题，发现如果表单内有使用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)用来开启/关闭字段验证器。

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

• JS组件Bootstrap Select2使用方法详解
• BootStrap中关于Select下拉框选择触发事件及扩展
• Bootstrap select多选下拉框实现代码
• BootStrap Select清除选中的状态恢复默认状态
• Bootstrap框架下下拉框select搜索功能
• bootstrap中selectpicker下拉框使用方法实例
• BootStrap的select2既可以查询又可以输入的实现代码
• bootstrapValidator bootstrap-select验证不可用的解决办法
• BootStrap select2 动态改变值的方法
• JS组件Bootstrap Select2使用方法解析
• bootstrap multiselect下拉列表功能