我正在尝试编写一些Javascript来从两个文本输入中获取值,这应该相当简单。但是有些不对劲。这是我的代码:
<script>
jQuery(function() {
jQuery('#fromPicker, #toPicker').datepicker({ dateFormat : 'yy-mm-dd' });
jQuery('#submit').attr('disabled', 'disabled');
jQuery('#toPicker').on('blur', function() {
var fromDate = jQuery('#fromPicker').val();
var toDate = jQuery('#toPicker').val();
console.log(toDate);
if (fromDate !== '' && toDate !== '') {
if (isValidDate(fromDate) && isValidDate(toDate)) {
jQuery('#submit').removeAttr('disabled');
} else {
alert('You must enter dates in the format "yyyy-mm-dd"');
}
}
});
});
function isValidDate(dt) {
if (dt.match(/^[0-9]{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])/)) {
return true;
}
}
</script>
然而,当我console.log(toDate)
时,我得到一个空字符串。但是,如果我再次执行另一个blur
事件(聚焦和取消聚焦该数据仍在其中的字段),我会得到正确的值。任何想法为什么它第一次不起作用?
两个文本输入的ID为#fromPicker
和#toPicker
,并且是jQueryUI日期选择器。
解决方案:
最终我想要的是这个:
jQuery(function(){ jQuery('#fromPicker,#toPicker')。datepicker({ dateFormat:'yy-mm-dd' });
jQuery('#submit').on('click', function() { var fromDate = jQuery('#fromPicker').val(); var toDate = jQuery('#toPicker').val(); if (fromDate !== '' && toDate !== '') { if (isValidDate(fromDate) && isValidDate(toDate)) { // do nothing } else { alert('You must enter dates in the format "yyyy-mm-dd"'); return false; } } else { return false; } }); }); function isValidDate(dt) { if (dt.match(/^[0-9]{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])/)) { return true; } } </script>
答案 0 :(得分:2)
我没有看到您的代码无法工作的任何原因,而不是blur
事件,请尝试使用datepicker的onselect
事件
jQuery('#toPicker').datepicker( {
onSelect: function(date) {
alert(date);
// Do other stuff
},
// ....
);
答案 1 :(得分:2)
当用户在输入字段外单击(选择日期)时,输入字段将模糊。没有办法解决这个问题。因此,不要触发模糊验证,而是使用datepicker的onSelect回调。
$('.selector').datepicker({
onSelect: function(dateText) { /* validation here */ }
});
如果您想保留onblur事件,可以推迟验证以允许datepicker在验证触发前填写字段,如下所示:
$('#myform input').blur(function () {
setTimeout(function () { /* validation here */ }, 1);
});
使用setTimeout来处理并发问题可能看起来像一个黑客,但由于JavaScripts的单线程特性,它的工作非常好。 jQuery-fame的John Resig在这个blogpost中讨论了它。