Date Range Picker和bootstrapValidator同時使用時,選擇日期後無法正常觸發校驗
阿新 • • 發佈:2019-02-11
在使用bootstrapValidator時,又同時使用了Date Range Picker,這時候就出現了,選擇了日期後,bootstrapValidator不能正常通過校驗。
如上圖時間的選擇會一直出現請選擇時間。這時候我百度了一下解決方案還在有人也遇到過這樣的情況,
當選擇完日期後,校驗結果並沒有達到預期,是因為bootstrapValidator外掛預設情況下,不會重複校驗一個已經標記為驗證通過或驗證不通過的欄位。so ,當開始觸發校驗後,沒有通過校驗,當正確選擇日期後,並不會重新整理校驗結果,就會導致資料無法正常提交,當手動把日期改變後,會發現校驗被正確觸發了。現在就說解決方法。
所以需要在Date Range Picker隱藏的時候重新觸發校驗
$('#headlineAddForm #rangeTime').daterangepicker({ timePicker : true, //是否顯示小時和分鐘 timePicker24Hour: true, timePickerIncrement : 10, //時間的增量,單位為分鐘 format : 'YYYY-MM-DD HH:mm:ss', //控制元件中from和to 顯示的日期格式 }, function(start, end, label) { $("#headlineAddForm #startTime").val(start.format('X')); $("#headlineAddForm #endTime").val(end.format('X')); }).on('hide.daterangepicker', function() { $('#headlineAddForm').data('bootstrapValidator').updateStatus('rangeTime', 'NOT_VALIDATED',null).validateField('rangeTime'); });
Date Range Picker有一個隱藏的事件叫做 hide.daterangepicker 當關閉Date Range Picker的時候回出發該時間的執行,這時候呼叫bootstrap的updateStatus清空校驗資訊,再次呼叫validateField對欄位進行再次校驗就可以了。
下面引用給出解決方案的那個童鞋的介紹
updateStatus方法的作用是更新給定欄位的校驗狀態,官方介紹如下:
validateField方法的作用是觸發給定欄位的校驗