onchange + validation +输入关键奇怪的行为

Question

我有一个带有日期输入字段的表单.日期应经过验证:仅允许从今天开始的日期+最多3年.如果日期有效,则会显示模式,否则会出现带有错误消息的警报.

假设somone将日期更改为26.10.2099:

如果一个人离开输入字段(通过用鼠标点击其他地方),一切都按预期工作:

• 出现错误消息
• 日期会自动更改回来
• 没有模态显示

但是如果按下Enter键而不是仅保留输入字段,则会发生以下情况:

• 没有错误消息显示
• 日期会自动更改回来
• 莫代尔出现了

我的想法是将日期更改回其初始值会导致再次触发onchange事件,然后日期有效并且模式将显示.但第一种情况并非如此.在第二种情况下,事件触发两次SOMETIMES但并非总是如此.

你可以在这里试试自己: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">&times;</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');
    }
  })

Answer 1

您的代码的问题是当您在Enter单击其他位置时按您的值！=。调试的时候就可以看到dateParts

当您输入示例：28.10.2099 并点击离开时dateParts是 ["28", "10", "2099"] 但是当输入示例：28.10.2099 并按 ENTER 时dateParts是 ["28", "10", "2019"]这里 datepicker 验证输入字段并自动将日期设置为 28.10.2019，因为您设置maxDate为3y。

keydown所以我的解决方案是在自动更改值之前绑定并绕过日期选择器。

这是工作代码的链接：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'; return false;

然而，要应用与点击离开相同的效果，应添加以下代码行：

onClose: function(){
  this.blur();
}

一些代码取自此答案：Disable Enter key in JQuery ui datepicker