引导日期选择器和自举验证

我使用从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

引导日期选择器和自举验证

回答

相关问题