在 kendo 日期选择器中添加验证结果递归调用

Question

我在它的模糊事件中有一个日期选择器和验证。如果验证失败，我会向用户显示一条消息并再次聚焦日期选择器。但它变得递归。

消息一直出现。除非她终止页面，否则用户无法退出循环。

(function() {
  $("#kendoDatePicker").kendoDatePicker();

  $("#kendoDatePicker").on("blur", function() {
    if ($(this).data("kendoDatePicker").value() > new Date()) {
      alert("Date cannot be greater than today. Please re-enter.");
      var datepicker = $(this).data("kendoDatePicker");
      datepicker.element.focus();
    }
  });
})();

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="demo-section k-content">
  <input id="kendoDatePicker" value="04/04/2017" style="width: 100%" />
</div>

Fiddle 在这里：https://jsfiddle.net/Hd47F/312/

Answer 1

好吧，你自己说的，你在模糊事件中再次聚焦日期选择器。所以，它当然会变成递归的。可以将验证逻辑放在表单提交事件中，而不是datepicker的blur事件，或者验证后不聚焦到datepicker。

顺便说一下，您甚至不需要验证。您可以将日期选择器的最大日期设置为今天的日期，这样用户甚至无法选择未来的日期。这也将使它更加用户友好。

在 kendo 日期选择器中添加验证结果递归调用

Adding validation in kendo datepicker results recusrive call

focus

blur

datepicker

kendo-ui

kendo-asp.net-mvc