我有一个带有日期输入字段的表单。应验证日期:只允许从今天开始的日期 + 最多 3 年。如果日期有效,将显示一个模式,否则将出现带有错误消息的警报。
假设某人将日期更改为 26.10.2099:
如果离开输入字段(通过用鼠标单击其他地方),一切都会按预期进行:
- 出现错误信息
- 日期自动改回
- 没有模态显示
但是如果按下 Enter 而不是离开输入框,会发生以下情况:
- 没有错误信息显示
- 日期自动改回
- 模态出现
我的想法是,将日期改回其初始值会导致再次触发 onchange 事件,然后日期有效并显示模态。但第一种情况并非如此。在第二种情况下,事件有时会触发两次,但并非总是如此。
你可以在这里试一试: https://jsfiddle.net/6x9n53fx/3/
或者阅读下面的代码:
HTML:
<div class="container">
<form method="post" action="" enctype="multipart/form-data">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="review_date">Valid until *</label>
<input id="review_date" type="text" name="review_date" value="26.10.2016" class="form-control">
<p>Please set a validation date. (max 3 years)</p>
</div>
</div>
</div>
</form>
</div>
<!-- Modal -->
<div class="modal fade" id="info_modal" tabindex="-1" role="dialog" aria-labelledby="modal_title">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modal_title">Dialog</h4>
</div>
<div class="modal-body">
<div class="form-group mbn">
<p class="mb10">Date successfully changed.</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
Javascript:
var datumfeld = $("#review_date");
var initialdatum = datumfeld.val();
var i = 0;
datumfeld.datepicker({
minDate: 0,
maxDate: "3y",
dateFormat: 'dd.mm.yy'
});
datumfeld.change(function() {
i++;
console.log('onchange triggered: ' + i);
if (validateDatum()) {
$("#info_modal").modal({
backdrop: "static",
keyboard: false
});
}
});
function validateDatum() {
var dateParts = datumfeld.val().split(".");
var review_date = new Date(dateParts[2], (dateParts[1] - 1), (parseInt(dateParts[0]) + 1));
if (((new Date(review_date - (new Date()))).getFullYear() - 1970) > 2) {
alert("Error: The date must not exceed 3 years from now.");
datumfeld.val(initialdatum);
return false;
}
if ((review_date - (new Date)) < 0) {
alert("Error: The date must not be in the past.");
datumfeld.val(initialdatum);
return false;
}
return true;
}
编辑:
这是我采用的最终解决方案:
datumfeld.on('keydown', function(e) {
// when keydown is ENTER (13)
if (e.keyCode == 13) {
// Hide the datepicker
$(this).datepicker('hide');
// Trigger a change event to trigger the validation
$(this).trigger('change');
}
})
最佳答案
您的代码中的问题是当您按 Enter 时您的值 != 当您单击其他位置时。调试dateParts
当您输入示例:28.10.2099 并点击离开时 dateParts
是 ["28", "10", "2099"]
但是当输入示例:28.10.2099 并按 ENTER dateParts
is ["28", "10", "2019"] 这里 datepicker 验证输入字段并自动将日期设置为 28.10.2019 因为你将 maxDate
设置为 3y
。
所以我的解决方案是绑定(bind) keydown
并在 datepicker 自动更改值之前绕过它。
这是工作代码的链接:https://jsfiddle.net/95qbs86x/2/
更新:添加代码
var datumfeld = $("#review_date");
var initialdatum = datumfeld.val();
var i = 0;
// bind keydown event
datumfeld.on('keydown', function(e) {
// when keydown is ENTER (13)
if (e.keyCode == 13) {
// trigger tab to hide datepicker
var e = $.Event("keydown");
e.which = 9; //tab
e.keyCode = 9;
e.key = 'Tab';
$(this).trigger(e);
return false;
}
}).datepicker({
minDate: 0,
maxDate: "3y",
dateFormat: 'dd.mm.yy',
onClose: function(){
this.blur();
}
}).on('change', function(e) {
i++;
console.log('onchange triggered: ' + i);
if (validateDatum()) {
$("#info_modal").modal({
backdrop: "static",
keyboard: false
});
}
});
function validateDatum() {
var dateParts = datumfeld.val().split(".");
console.log(dateParts);
var review_date = new Date(dateParts[2], (dateParts[1] - 1), (parseInt(dateParts[0]) + 1));
if (((new Date(review_date - (new Date()))).getFullYear() - 1970) > 2) {
alert("Error: The date must not exceed 3 years from now.");
datumfeld.val(initialdatum);
return false;
}
if ((review_date - (new Date)) < 0) {
alert("Error: The date must not be in the past.");
datumfeld.val(initialdatum);
return false;
}
return true;
}
注意:一些代码可以像这样删除:e.which = 9;
e.key = 'Tab';
返回假;
但是要应用与点击离开相同的效果,应添加这行代码:
onClose: function(){
this.blur();
}
一些代码取自这个答案:Disable enter key in JQuery ui datepicker
关于javascript - onchange + validation + enter key 奇怪的行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40258233/