1. 程式人生 > >Date Range Picker和bootstrapValidator同時使用時,選擇日期後無法正常觸發校驗

Date Range Picker和bootstrapValidator同時使用時,選擇日期後無法正常觸發校驗

在使用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方法的作用是觸發給定欄位的校驗