Javascript 引导数据选择器和引导验证程序

我正在使用中的引导日期选择器和中的引导验证程序。我也在使用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>

对于验证器：

$(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'
                    }
                }
            }
        }
    });
});

---

将BootstrapValidator与Bootstrap datetimepicker或Bootstrap datepicker一起使用时，应重新验证日期字段

因此，您应该添加以下内容：

1） 与引导datetimepicker一起使用：

$('.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');
});

---

有关更多信息，请参阅。

以上已接受的答案对我无效。对我有效的方法很简单

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

---

希望这有帮助

不知何故，在选择日期后，datepicker（）会丢失日期字段的焦点，并且没有任何验证程序插件可以将日期输入字段视为已填充（有效）。 作为结论，一个简单的.focus（）就可以做到这一点

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

---

对于大多数情况，上述答案都应该有效，但如果最终这些答案对您无效，您也可以尝试以下方法：

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

这个脚本的主要思想是通过“设置”和“取消设置”焦点来强制验证。我知道这类似于模拟允许运行验证的正常事件

---

祝你好运

您还必须在项目中包含最新的验证cdn：

  $('[name="StartDate"]').datepicker({
            weekStart: 1,
            autoclose: true,
            todayHighlight: true
        }).on('changeDate', function (selected) {

            if ($('[name="StartDate"]').val() == '' || typeof 
    $('[name="StartDate"]').val() == "undefined") {                
                $('[name="EndDate"]').val('').datepicker('setStartDate', null);                
            }
            else {
                $('[name="EndDate"]').val('').datepicker('setDate', new Date());
                $('[name="EndDate"]').datepicker('setStartDate', null);
                startDate = new Date(selected.date.valueOf());
                startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
                $('[name="EndDate"]').datepicker('setDate', startDate);
                $('[name="EndDate"]').datepicker('setStartDate', startDate);
                $('[name="EndDate"]').val('').datepicker('update', '');
            }
        });

        $('[name="StartDate"]').blur(function (selected) {
            if ($('[name="EndDate"]').val() != '' && $('[name="StartDate"]').val() == '' || typeof $('[name="StartDate"]').val() == "undefined") {                
                $('[name="StartDate"]').datepicker('setDate', new Date());
                $('[name="StartDate"]').val('').datepicker('setStartDate', null);
                $('[name="EndDate"]').datepicker('setDate', new Date());
                $('[name="EndDate"]').val('').datepicker('setStartDate', null);
            }
        });

     $("#datepicker2").datepicker({
            autoclose: true,
            todayHighlight: true
        }).datepicker();

---

您能告诉我们您正在使用的那两个插件是什么吗？验证器可能很容易猜测，但如果您提到这两个插件，它将帮助您发布文章。对于验证，我使用bootstrapValidator.min.js版本v0.5.0，构建于2014年7月14日，对于datepicker，我使用bootstrap-datepicker.js版本3.1.1，我使用jquery 1.10.2。我的意思是提供插件页面的链接。例如，为了进行验证，您是否使用此工具？对于datepicker，您正在使用它吗？是的，我使用您提到的两个链接中的datepicker和验证器。我使用了一个datetimepicker，我也有同样的问题。谢谢你的回答。我有一个问题，

data.bv.isValid（）

总是

false

@you请在boy的适当存储库中创建一个新问题或创建一个问题，你简单而聪明的解决方案为我省下了一个严重的心脏灼伤案例！穆查斯·格雷西亚斯！：）事实上，我说得太快了。添加.focus（）似乎解决了这个问题，但事实并非如此——正在删除无效类，但验证插件仍然认为该字段无效@RogerDodger，你在使用哪个验证器插件？jqueryvalidation.org上的一个-修复它的是@Sparky在另一个SO线程上提供的解决方案，而不是$（this.focus（），我使用$（this.valid（）。这就成功了。艾伊，介意再加上一些描述。。看怎么回答，要堆栈溢出！

  $('[name="StartDate"]').datepicker({
            weekStart: 1,
            autoclose: true,
            todayHighlight: true
        }).on('changeDate', function (selected) {

            if ($('[name="StartDate"]').val() == '' || typeof 
    $('[name="StartDate"]').val() == "undefined") {                
                $('[name="EndDate"]').val('').datepicker('setStartDate', null);                
            }
            else {
                $('[name="EndDate"]').val('').datepicker('setDate', new Date());
                $('[name="EndDate"]').datepicker('setStartDate', null);
                startDate = new Date(selected.date.valueOf());
                startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
                $('[name="EndDate"]').datepicker('setDate', startDate);
                $('[name="EndDate"]').datepicker('setStartDate', startDate);
                $('[name="EndDate"]').val('').datepicker('update', '');
            }
        });

        $('[name="StartDate"]').blur(function (selected) {
            if ($('[name="EndDate"]').val() != '' && $('[name="StartDate"]').val() == '' || typeof $('[name="StartDate"]').val() == "undefined") {                
                $('[name="StartDate"]').datepicker('setDate', new Date());
                $('[name="StartDate"]').val('').datepicker('setStartDate', null);
                $('[name="EndDate"]').datepicker('setDate', new Date());
                $('[name="EndDate"]').val('').datepicker('setStartDate', null);
            }
        });

     $("#datepicker2").datepicker({
            autoclose: true,
            todayHighlight: true
        }).datepicker();