溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

詳解BootStrap表單驗證中重置BootStrap-select驗證提示不清除的坑

發(fā)布時間：2020-09-20 11:38:13 來源：腳本之家 閱讀：239 作者：StarlightUnion 欄目：web開發(fā)

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

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');
})

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

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

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

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。

AI
助
手