引導日期選擇器和自舉驗證

我使用從here引導日期選擇器，並從here引導驗證。另外我正在使用bootstrap v3.1.1。引導日期選擇器和自舉驗證

從日期選擇器驗證不反應選擇日期之後。它僅在我使用鍵盤輸入日期時有效。

這裏是我的HTML代碼：

<form id="myForm" method="POST"> 
    <div class="col-lg-3"> 
    <div class="form-group"> 
     <input name="endDate" type="text" class="datepicker form-control"> 
    </div> 
    </div> 
</form>

在.js文件我補充說：

$(document).ready(function() { 
    $('.datepicker').datepicker(); 
)};

和驗證：

$(document).ready(function() { 
    $('#myForm').bootstrapValidator({ 
     feedbackIcons: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     fields: { 
      endDate: { 
       validators: { 
        date: { 
         format: 'DD/MM/YYYY', 
         message: 'The format is dd/mm/yyyy' 
        }, 
        notEmpty: { 
         message: 'The field can not be empty' 
        } 
       } 
      } 
     } 
    }); 
});

來源

2014-08-27 user3411746

你能告訴我們哪些是您正在使用這些兩個插件？驗證器可以很容易地猜到，但如果你提到了兩個插件，它會幫助你的帖子。 – 2014-08-27 21:16:37

爲了驗證我用bootstrapValidator.min.js版本v0.5.0，建於2014年7月14日和日期選擇器我用自舉datepicker.js版本3.1.1和使用jQuery 1.10.2。 – user3411746 2014-08-28 06:57:51

我打算給插件頁面的鏈接。例如。驗證你使用這個http://bootstrapvalidator.com/？對於日期選擇器，你使用這個http://vitalets.github.io/bootstrap-datepicker/？ – 2014-08-28 08:06:09

當使用BootstrapValidator與引導-的DateTimePicker或Bootstrap-datepicker，你應該重新驗證日期字段。

所以，你應該補充一點：用自舉的DateTimePicker使用

1）：自舉，日期選擇器使用

$('.date') 
    .on('dp.change dp.show', function(e) { 
     // Revalidate the date when user change it 
     $('#myForm').bootstrapValidator('revalidateField', 'endDate'); 
});

2）：

$('.datepicker') 
    .on('changeDate show', function(e) { 
     // Revalidate the date when user change it 
     $('#myForm').bootstrapValidator('revalidateField', 'endDate'); 
});

更多信息，請參見datetimepicker example 。

來源

2014-09-03 12:55:24 Arkni

我有一個問題，''data.bv.isValid（）''總是''false'' – YouYou 2014-12-02 14:54:45

@YouYou請在正確的存儲庫中創建一個新問題或創建問題https://github.com/nghuuphuoc/bootstrapvalidator/issues/new – Arkni 2014-12-03 01:44:31

以上接受的答案沒有工作我。對我而言，工作非常簡單。

$('#datefield').datepicker().on('changeDate', function (e) { 
     $('#datefield').focus(); 
     $('#anyotherfield').focus(); 
     $('#datefield').focus();    
});

希望這會有所幫助！

來源

2015-05-21 16:20:49 Vijay

不知何故，選擇日期後，日期選擇器（）失去日期欄的焦點和沒有驗證器插件可以看到日期輸入字段作爲填充（有效）。作爲一個結論，一個簡單的.focus（）可以做到這一點。

$('#datefield').datepicker({ 
    //datepicker methods and settings here 
}).on('changeDate', function (e) { 
    $(this).focus();  
});

來源

2016-03-21 12:21:25

boy，you're簡單而又聰明的解決方案爲我節省了一個重大的心臟燒傷案例！ Muchas格拉西亞斯！ :) – 2017-10-23 09:42:48

其實我說得太快了。添加.focus（）似乎解決了這個問題，但它確實沒有 - 無效的類被刪除w/it，但驗證插件仍然認爲該字段無效！ – 2017-10-23 10:04:03

@RogerDodger，你使用的驗證器插件？ – 2017-10-24 08:42:29

對於大多數情況下，答案應該以上工作，但如果最終anythose答案是不是爲你工作，可以試試這個太：

$('.datepicker').change(function() { 
     $(this).focus(); 
     $(this).blur(); 
    });

在這個腳本主要思想是通過強制驗證「設置」和「取消設置」之後。我知道這與模擬允許運行驗證的正常事件相似。

祝你好運！

來源

2017-01-20 17:41:23 Davhec

引導日期選擇器和自舉驗證

回答

相關問題