jQuery验证不适用于日期选择器的输入 [英] Jquery validate not working for input with datepicker
问题描述
jQuery validate对于其他输入也可以正常工作,但是对于已初始化datepicker的输入,即使输入了有效输入,它也不会更新错误消息.我还发现,如果使用有效输入选择(聚焦)元素内的值并将其聚焦到元素外,错误消息就消失了,这就是为什么我尝试$(element).select()的原因,但它起作用了有缺点...
Jquery validate works fine for other inputs, but for those with datepickers initialized, it is not updating error messages even though valid input is entered. Also I figured out that if the value inside the element is selected (focused) with valid input and focused out of the element, the error message vanishes, which is why I tried to $(element).select(), It worked but it had drawbacks...
<div class="form-group">
<label for="date_of_birth" class="col-sm-4 control-label">Date of Birth <span class="input-required">*</span></label>
<div class="col-sm-7">
<div class='input-group date' id='date_of_birth'>
<input type='text' class="form-control dateField" name="date_of_birth" placeholder="MM/DD/YYYY" id="date_of_birth_field" data-toggle="tooltip" data-placement="top"value=""/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> </span>
</div>
</div>
</div>
如果有帮助,这就是datePicker初始化的方式.
This is how datePicker initialized, if it helps..
$('#date_of_birth').datetimepicker({
format: 'MM/DD/YYYY',
language: 'en',
maxDate: new Date,
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down"
}
});
这是一个验证脚本:
$.validator.setDefaults({
errorClass: 'help-block',
errorElement: 'span',
focusInvalid: true,
ignore: ":hidden",
highlight: function(element, errorClass, validClass)
{
var fieldtype = ($(element).hasClass('dateField') ? 'dateField' : 'normal');
switch(fieldtype)
{
case "dateField":
$(element).closest('.form-group').addClass('has-error');
// $(element).select();
break;
default:
$(element).closest('.form-group').addClass('has-error');
break;
}
},
unhighlight: function(element, errorClass, validClass)
{
if($(element).hasClass('select2-offscreen'))
{
$(element).closest('.form-group').removeClass('has-error');
$(element).next('span').css({display: "none"});
}
else
{
$(element).closest('.form-group').removeClass('has-error');
}
},
errorPlacement: function (error, element) {
var fieldtype = ($(element).hasClass('dateField') ? 'dateField' : 'normal');
switch (fieldtype) {
case "dateField":
error.appendTo(element.parent().parent());
break;
default:
error.appendTo(element.parent());
break;
}
}
});
$('#employee-form').validate(
{
rules: {
date_of_birth: {
gbdDate: true,
required: true
}
},
messages: {
date_of_birth: "Please enter valid date";
}
});
我知道这很漫长而无聊,但是我无法使其在JSfiddle中运行...请有人帮助我解决这个问题.
I know this is all long and boring, but I couldn't make it run in JSfiddle... Please some one help me with this..
推荐答案
找到我的答案: SparkBox
$('.dateField').datepicker({
onClose: function()
{
$(this).valid();
}
});
这解决了...
这篇关于jQuery验证不适用于日期选择器的输入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!