Javascript 使用jquery验证在focusout上验证日期字段

首次选择日期时，日期输入字段无效。
它显示所需的错误消息，因为字段的值为空（请检查控制台日志）。但字段在第二次更改时有效

注意：原因之一是日期输入字段在选择日期时失去焦点（单击事件）。但是，只有在单击事件发生后，日期才会发生更改。但验证器将在焦点输出事件上验证字段

我正在验证一个表单，使用，用于Widget

^^要获得更好的用户体验，请在整个页面上运行代码段；） 或

来自@Sparky/@Vignesh ans：是的，这是一个解决方法，我们可以使用change/hide/changeDate（模块属性）事件处理程序。一旦设置了输入值，它就会被触发。 但问题是，每当我们从年->月->日期中选择时，每次单击选择器，就会从输入中删除焦点，并触发focusout事件，并显示错误消息，直到选择日期

它不像选择场那样平坦。在选择字段中，在从字段小部件中选择选项之前，不会触发focusout事件。像这样，我们如何在不看到错误消息的情况下移动年/月/日期选项

jQuery:&HTML

$（函数（）{
$（“#editEventForm”）.validate({
规则：{
全名：{
要求：正确，
},
活动日期：{
要求：正确，
},
},
信息：{
全名：“请输入您的全名！”，
事件日期：“请输入有效日期！”，
},
突出显示：函数（元素，errorClass）{
变量e=$（元素）；
e、 最近（'.has-feedback'）.removeClass（'has-success'）.addClass（'has-error'）；
},
取消高亮显示：函数（元素，errorClass）{
变量e=$（元素）；
e、 最近的（'.has-feedback'）.removeClass（'has-error'）.addClass（'has-success'）；
},
onfocusout：函数（元素）{
log（“元素值-->”，$（element.val（））；
返回$（元素）.valid（）；
},
});
$（'#eventDate'）。日期选择器({
自动关闭：是的，
}).on（'change'，function（））{
$（this）.valid（）；//触发验证测试
//$（这是指$（“#eventDate”）
});
});
。有错误：焦点{
边框颜色：#f84545！重要；
}
.错误{
颜色：#f84545；
}

全名*
活动日期*
您可以在日期选择器中设置首次加载的日期

$('#eventDate').datepicker({
                autoclose: true 
            }).datepicker("setDate", 'now');

问题不可能是因为赏金

jQueryValidate插件会自动触发对正常表单输入字段的FocusOut和key-up的验证测试，但与日期选择器不兼容

无论何时选择日期，都必须以编程方式触发验证：

$('#eventDate').datepicker({
    autoclose: true,
    // endDate: '+45d', // show current date - next 45 days
}).on('change', function() {
    $(this).valid();  // triggers a validation test
    // $(this) refers to $('#eventDate')
});

TL；DR：单击事件将焦点移动到单击的元素。因此，单击选择器中的日期时，将焦点从输入中移除，并触发
focusout
事件。在设置输入值之前，选择器执行各种操作。因此，
focusout
上的值保持为空。因此，警报将保留在UI中

解释：单击/聚焦
日期
字段时，
日期选择器
打开。当您在
日期选择器
中单击
日期
时，就会出现真正的问题。单击后，您可以看到日期字段立即失去焦点（闪烁的插入符号消失）。当我们配置自动关闭时，选择器立即关闭。以下是datepicker中编写的隐藏功能

hide: function() {
        return this.isInline || !this.picker.is(":visible") ? this : (this.focusDate = null,
        this.picker.hide().detach(),
        this._detachSecondaryEvents(),
        this.setViewMode(this.o.startView),
        this.o.forceParse && this.inputField.val() && this.setValue(),
        this._trigger("hide"),
        this)

使拾取者隐藏起来
detach（）
将删除关联的元素，保持元素细节不变，以防再次插入元素
从日期选择器中删除附加的辅助事件
将viewmode设置为已配置的模式（因为在我们的问题中没有配置，所以将其设置为默认模式）
解析选定值并将解析结果设置到输入框
运行在选项中配置的自定义回调（如果有）
因此，在设置输入中的值之前，将触发
onfocusout
事件。由于当时不存在任何值，因此会显示错误

为了防止这种情况发生，请在选择器中添加一个
hide
事件处理程序（如下所示），并从此处处理相同的验证。一旦设置了输入值（如上所述），就会触发此自定义事件处理程序


$（函数（）{
$（“#editEventForm”）.validate({
规则：{
全名：{
要求：正确，
},
活动日期：{
要求：正确，
},
},
信息：{
全名：“请输入您的全名！”，
事件日期：“请输入有效日期！”，
},
onfocusout：函数（元素）{
$（元素）.valid（）；
},
});
$（'#eventDate'）。日期选择器({
自动关闭：是的，
方向：“右下角”
}).on（“隐藏”，函数（）{
$（“#editEventForm”）.data（“验证器”）.settings.ignore=“”；
$（this.valid（）；
}).on（“焦点”，函数（）{
$（“#editEventForm”）.data（“validator”）.settings.ignore=“#eventDate，：hidden”；
});
});

全名*
活动日期*
简化@Vignesh解决方案

我们可以跳过字段验证
onfocusout
，并在
hide
事件上执行验证

// here we can skip the validation
onfocusout: function(element) {
  var elementId = element.getAttribute('id');
  if (elementId === "eventDate") {
    // datepicker widget - don't do validation on focusout event
    return false;
  }
  return $(element).valid();
},


// here we can do the validation
$('#eventDate').datepicker({
  autoclose: true,
}).on('hide', function() {
  // datepicker - on hide do the field validation
  $('#eventDate').valid();
});

用于将今天的日期设置为默认日期。此副本：@Sparky是的，我已经通过了。但是，我们如何在不触发错误消息的情况下移动年/月/日期选项呢？@ramganesh更新了我的答案。请看一下。@ramganesh更新了答案。希望能有帮助。：）是的，它工作正常，正如预期的那样，我只是