javascript - onchange + validation + enter key weird behaviour -

i have form input field dates. dates should validated: dates today + maximum 3 years allowed. if date valid, modal show, else there alert error message.

assuming somone changes date 26.10.2099:

everything works expected, if 1 leaves input field (by clicking somewhere else mouse):

• error message appears
• date gets automatically changed back
• no modal shows

but if 1 presses enter instead of leaving input field, following happens:

• no error message shows
• date gets automatically changed back
• modal shows up

my thought changing date initial value causees onchange event triggered again, , date valid , modal show. not case first scenario. in second scenario event triggers twice not always.

you can tryout here: https://jsfiddle.net/6x9n53fx/3/

or read code below:

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 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 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 = 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: date must not exceed 3 years now.");     datumfeld.val(initialdatum);     return false;   }   if ((review_date - (new date)) < 0) {     alert("error: date must not in past.");     datumfeld.val(initialdatum);     return false;   }   return true; } 

edit:

here final solution went with:

datumfeld.on('keydown', function(e) {     // when keydown enter (13)     if (e.keycode == 13) {       // hide datepicker       $(this).datepicker('hide');       // trigger change event trigger validation       $(this).trigger('change');     }   }) 

the problem code when press enter value != when click else where. can see when debug dateparts

when enter example: 28.10.2099 , click away dateparts ["28", "10", "2099"] when enter example: 28.10.2099 , press enter dateparts ["28", "10", "2019"] here datepicker validate input field , set automaticly date 28.10.2019 because set maxdate 3y.

so solution bind keydown , bypass datepicker before change value automaticly.

here link working code: https://jsfiddle.net/95qbs86x/2/

update: added code

var datumfeld = $("#review_date"); var initialdatum = datumfeld.val(); var = 0;  // bind keydown event datumfeld.on('keydown', function(e) {   // when keydown enter (13)   if (e.keycode == 13) {      // trigger tab 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: date must not exceed 3 years now.");     datumfeld.val(initialdatum);     return false;   }   if ((review_date - (new date)) < 0) {     alert("error: date must not in past.");     datumfeld.val(initialdatum);     return false;   }   return true; } 

notice: code remove like: e.which = 9; e.key = 'tab'; return false;

however applying same effect click away, line of code should added:

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

some code taken answere: disable enter key in jquery ui datepicker