場景:
最近接到回報,頁面表單未輸入内容,直接點選儲存,然後日期選擇框選擇日期,但頁面校驗還是沒有重新整理,一直顯示錯誤提示資訊,且頁面表單無法送出,如下圖。
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIwczX0xiRGZkRGZ0Xy9GbvNGL2EzXlpXazxSNVRlTykkaOFTT6hFMG1mYw50MMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnL1ITO2ATO1ETM0ATMwAjMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
頁面表單采用 bootstrapValidator 插件用做前端表單驗證,日期選擇器采用的是 bootstrap 的 datetimepicker 。兩者結合使用,在表單日期第一次校驗出錯,再次修改送出後,校驗狀态和校驗資訊都不會更新,并且 bootstrapValidator 校驗一直處于失敗狀态,阻止頁面表單送出。對這個問題花了快一上午的時間,不停的在網上找解決方案并在本地修改嘗試,終于功夫不負有心人,找到了一個比較滿意的解決方案,特此記錄下。
解決辦法:
在網上找的方法,大緻分為兩種:
第一種:校驗屬性中加入trigger='change' 或針對時間控件的 trigger='changeDate',如下圖
這個我試了,一直沒效果,不知道是不是搭配其他的修改方法。
第二種:通過監聽時間控件的 changeDate 方法,手動觸發 bootstrapValidator 進行重新校驗,如下圖:
依據的是bootstrap Validator 官方文檔内容
$(form).data('bootstrapValidator')
.updateStatus(field, 'NOT_VALIDATED')
.validateField(field);
// Or
$(form).bootstrapValidator('updateStatus', field, 'NOT_VALIDATED')
.bootstrapValidator('validateField', field);
但這種方法 updateStatus 會報錯,網上有文章說,這個方法已經被廢棄了,不知真假。
繼續尋找,在網上找到一位大神的部落格《bootstrap-validator校驗行為不觸發的解決》,裡面有大緻介紹他遇到的bootstrap Validator 校驗不觸發的排查和解決方法,最終發現 bootstrap Validator 監聽的是 input 事件。
txtDept.trigger('input');
将大神的方法,整合到頁面的單個時間控件進行試驗,發現如大佬所說的那樣,這樣可以手動觸發bootstrap Validator 校驗,達到了我預期的目标。
然而,因為目前前端表單校驗都是采用 bootstrap Validator ,時間控件也都是 datetimepicker,雖然暫時我這個頁面有回報說有問題,但這問題肯定不是個案,一個個去改,太麻煩,而且很容易漏掉,不現實,需要全局處理,于是對剛剛的單個時間控件測試代碼進行修改,并放在公共的js裡面,供整個項目進行使用。
//監聽時間控件的changeDate事件,解決bootstrapValidator 與 datetimepicker 組合使用,二次校驗無效問題
$(document).on('changeDate', '.form_datetime input', function () {
$(this).trigger('input');
})
.form_datetime input 是查找我目前工程中,所有時間控件,每次時間改變都會觸發 trigger('input') 事件。
《bootstrap-validator校驗行為不觸發的解決》https://blog.csdn.net/qq_35473192/article/details/82887754