天天看點

解決bootstrapValidator 與 datetimepicker 組合使用,二次校驗日期驗證不會重新整理問題

場景:

        最近接到回報,頁面表單未輸入内容,直接點選儲存,然後日期選擇框選擇日期,但頁面校驗還是沒有重新整理,一直顯示錯誤提示資訊,且頁面表單無法送出,如下圖。

解決bootstrapValidator 與 datetimepicker 組合使用,二次校驗日期驗證不會重新整理問題

頁面表單采用 bootstrapValidator 插件用做前端表單驗證,日期選擇器采用的是 bootstrap 的 datetimepicker 。兩者結合使用,在表單日期第一次校驗出錯,再次修改送出後,校驗狀态和校驗資訊都不會更新,并且 bootstrapValidator  校驗一直處于失敗狀态,阻止頁面表單送出。對這個問題花了快一上午的時間,不停的在網上找解決方案并在本地修改嘗試,終于功夫不負有心人,找到了一個比較滿意的解決方案,特此記錄下。

解決辦法:

    在網上找的方法,大緻分為兩種:

    第一種:校驗屬性中加入trigger='change' 或針對時間控件的 trigger='changeDate',如下圖

解決bootstrapValidator 與 datetimepicker 組合使用,二次校驗日期驗證不會重新整理問題

這個我試了,一直沒效果,不知道是不是搭配其他的修改方法。

第二種:通過監聽時間控件的 changeDate 方法,手動觸發 bootstrapValidator 進行重新校驗,如下圖:

解決bootstrapValidator 與 datetimepicker 組合使用,二次校驗日期驗證不會重新整理問題

依據的是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

繼續閱讀