Как получить значение от ввода текста при размытии поля

Question

Я пытаюсь написать Javascript, чтобы получить значение из двух текстовых входов, что должно быть довольно простым. Но что-то не так. Вот мой код:

<script> 
    jQuery(function() { 
     jQuery('#fromPicker, #toPicker').datepicker({ dateFormat : 'yy-mm-dd' }); 

     jQuery('#submit').attr('disabled', 'disabled'); 

     jQuery('#toPicker').on('blur', function() { 
      var fromDate = jQuery('#fromPicker').val(); 
      var toDate = jQuery('#toPicker').val(); 
      console.log(toDate); 

      if (fromDate !== '' && toDate !== '') { 
       if (isValidDate(fromDate) && isValidDate(toDate)) { 
        jQuery('#submit').removeAttr('disabled'); 
       } else { 
        alert('You must enter dates in the format "yyyy-mm-dd"'); 
       } 
      } 
     }); 
    }); 

    function isValidDate(dt) { 
     if (dt.match(/^[0-9]{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])/)) { 
      return true; 
     } 
    } 
</script> 

Когда я console.log(toDate) однако, я получаю пустую строку. Но если я снова сделаю еще одно событие blur (фокус и нефокусное поле с данными, все еще в нем), я получаю правильное значение. Любые идеи, почему это не работает в первый раз?

Два текстовых ввода имеют идентификаторы #fromPicker и #toPicker и являются jQueryUI datepickers.

РЕШЕНИЕ:

Что в конечном счете сделал то, что я хотел это:

JQuery (функция() { JQuery ('# fromPicker, #toPicker') DatePicker ({ DateFormat.: 'уу-мм-дд' });

jQuery('#submit').on('click', function() { 
     var fromDate = jQuery('#fromPicker').val(); 
     var toDate = jQuery('#toPicker').val(); 

     if (fromDate !== '' && toDate !== '') { 
      if (isValidDate(fromDate) && isValidDate(toDate)) { 
       // do nothing 
      } else { 
       alert('You must enter dates in the format "yyyy-mm-dd"'); 
       return false; 
      } 
     } else { 
      return false; 
     } 
    }); 
}); 

function isValidDate(dt) { 
    if (dt.match(/^[0-9]{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])/)) { 
     return true; 
    } 
} </script> 

Answer 1

Я не вижу никаких причин, для вашего кода, чтобы не работать, но вместо blur события, попробуйте onselect событие DatePicker вместо

jQuery('#toPicker').datepicker({ 
    onSelect: function(date) { 
     alert(date); 
     // Do other stuff 
    }, 
    // .... 
); 

Answer 2

Когда пользователь щелкает за пределами поля ввода (выбрать дату), поле ввода будет стираться. Это не так. Таким образом, вместо запуска проверки на размытие используйте функцию datepicker onSelect.

$('.selector').datepicker({ 
    onSelect: function(dateText) { /* validation here */ } 
}); 

Если вы хотите сохранить ваши ONBLUR-события, вы можете отложить проверку, чтобы на DatePicker заполнить поле перед срабатыванием проверки, как это:

$('#myform input').blur(function() { 
    setTimeout(function() { /* validation here */ }, 1); 
}); 

Использование SetTimeout для обработки проблемы параллелизма могут выглядеть как взломы, но из-за однопоточного характера JavaScripts он работает очень хорошо. Джон Ресиг из jQuery-славы рассказывает об этом в этом blogpost.

Link to Original Post