0

I have a datepicker, textbox and validation in their blur event. If validation fails for datepicker I am showing a message to user. But it shows immediately the validation message of textbox. And it becomes recursive.

Message appears all the time. User can't get of the loop unless she kills the page.

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

  $("#kendoDatePicker").on("blur", function() {
    if ($(this).data("kendoDatePicker").value() > new Date()) {
      alert("Date cannot be greater than today. Please re-enter.");      
    }
  });
  
  $("#kendoTextBox").on("blur", function() {
    var sch_time = $('#kendoTextBox').val();
    if (sch_time == "") {
      alert("Input can't be empty.");      
    }
  });  
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>

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

Fiddle: https://jsfiddle.net/Hd47F/1530/

RobG
  • 142,382
  • 31
  • 172
  • 209
Lonely Planeteer
  • 389
  • 1
  • 5
  • 21
  • Validation is working fine. That's not the issue here. Please check the fiddle. $(this).data("kendoDatePicker").value(): Tue Apr 04 2017 00:00:00 GMT+1000 (Australian Eastern Standard Time) new Date(): Wed Sep 12 2018 11:11:19 GMT+1000 (Australian Eastern Standard Time) – Lonely Planeteer Sep 12 '18 at 01:12
  • 1
    In that case, the datepicker is irrelevant. I've updated your example with the required external libraries, I don't see the reported behaviour in the text input. It's usually better to use a change event rather than blur, and especially don't use an alert because in some browsers, each time it's presented and dismissed dispatches another blur event, hence the infinite recursion. Instead, write a message into the page that doesn't present a modal dialog. – RobG Sep 12 '18 at 09:03

0 Answers0