快捷導(dǎo)航

詳解BootStrap表單驗(yàn)證中重置BootStrap-select驗(yàn)證提示不清除的坑

更新時(shí)間：2019年09月17日 14:50:29 作者：StarlightUnion

這篇文章主要介紹了詳解BootStrap表單驗(yàn)證中重置BootStrap-select驗(yàn)證提示不清除的坑，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

還是表單驗(yàn)證的問題，發(fā)現(xiàn)如果表單內(nèi)有使用BootStrap-select的下拉選框，在重置表單內(nèi)容時(shí)，會(huì)觸發(fā)對(duì)下拉選框的驗(yàn)證，并且驗(yàn)證的提示不會(huì)被清除，仍然會(huì)存在。

1.HTML結(jié)構(gòu)

<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.錯(cuò)誤的重置按鈕綁定事件

$('#resetForm').on('click', function () {
  //下拉選框初始化
  $("#selectDirect").selectpicker('deselectAll');
})

此時(shí)點(diǎn)擊重置按鈕只會(huì)將選框初始化，但是卻會(huì)觸發(fā)對(duì)下拉選框的驗(yàn)證，此前我們已經(jīng)將選框重置，所以肯定是通不過驗(yàn)證得到，所以會(huì)出現(xiàn)紅色的提示信息。那么如何將這些提示信息也去掉？

3.正確地重置按鈕綁定事件

$('#resetForm').on('click', function () {
  //下拉選框初始化
  $("#selectDirect").selectpicker('deselectAll');

  //啟用字段驗(yàn)證器
  $('#validatorForm').data('bootstrapValidator').enableFieldValidators('directPicker', true);
})

enableFieldValidators(field, enabled, validator)用來開啟/關(guān)閉字段驗(yàn)證器。

參數(shù)(*為必填)	類型	描述
field*	String	字段名稱
enabled*	Boolean	為true時(shí)開啟字段驗(yàn)證器，為false時(shí)則關(guān)閉
validator	String	驗(yàn)證器名稱，如果未設(shè)置，所有字段驗(yàn)證器將會(huì)開啟/關(guān)閉