У меня есть форма с несколькими полями, которая имеет как динамически созданные поля, так и некоторые предопределенные поля. одно из полей использует плагин jquery timepickerhttp://jonthornton.github.io/jquery-timepicker/

Теперь мой вопрос заключается в том, что я делаю быструю проверку поля в реальном времени, так как оно размыто, и если проверка не удалась, отобразите ошибку и верните фокус в это поле. Теперь мой код работает должным образом в chrome, но в IE 11 и Firefox (inputfiled) .focus () не срабатывает, поэтому фокус не возвращается к полю.

Вот мой код скрипкаhttp://jsfiddle.net/8cL42bcy/6/

Ниже приведен тот же фрагмент кода здесь ...

$(document).ready(function() {
  // this is used just to highlight where the current focus is on...
  $("input").focus(function() {
    $(this).css('background-color', 'rgba(240, 116, 116, 0.69)');
  });

  $("input").blur(function() {
    $(this).css('background-color', '#fff');
  });

  // timepicker plugin courtesy of--  http://jonthornton.github.io/jquery-timepicker/
  $('#presentationTime').timepicker({
    'scrollDefault': '08:30 AM',
    'disableTimeRanges': [
      ['8:01pm', '11:59pm'],
      ['12am', '7:59am']
    ],
    'timeFormat': 'h:i A',
    'selectOnBlur': true
  }).on('timeFormatError', function() {
    if ($('#presentationTime').val() != null || $('#presentationTime').val() != "") {
      $("#errormsg").css("display", "inline").fadeOut(4000);
    }
    $('#presentationTime').val("");
    $('#presentationTime').focus();
  }).on('timeRangeError', function() {
    if ($('#presentationTime').val() != null || $('#presentationTime').val() != "") {
      $("#errormsg").css("display", "inline").fadeOut(4000);
    }
    $('#presentationTime').val("");
    $('#presentationTime').focus();
  });
  // end timepicker function

  $("#field").blur(function() {
    if ($('#field').val() != "12345") {
      $("#field").css('outline', 'green dotted thick');
      $('#field').val("");
      $('#field').focus();
    }
  });


});

        #errormsg {
          display: none;
          margin-left: 15px;
          color: red;
        }
        .ui-timepicker-list li.ui-timepicker-disabled {
          /*display: none;*/
          font-weight: normal;
          font-size: 12px;
        }

<link href="http://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/jquery-ui.css" rel="stylesheet" />
<link href="http://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/jquery.timepicker.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/js/vendor/jquery.timepicker.min.js"></script>


Field 1::
<input type="text" name="textfield" size="25" value="" autofocus>Field 2::
<input type="text" name="textfield" size="25" value="">
<br>
<br>
<br>time slot::
<input type="text" id="presentationTime" name="presentationTime" size="10" value="" placeholder="HH:mm A"><span id="errormsg">Valid Time required!</span>

<br>
<br>
<br>Filed 4::
<input id="field" type="text" name="textfield" size="25" value="">Field 5::
<input type="text" name="textfield" size="25" value="">
<br>

Теперь в Chrome поведение выглядит следующим образом ...

нажмите до полевого временного интервала и введите тарабарщину, нажмите на табуляцию или сфокусируйтесь, отобразится сообщение, и фокус вернется в поле временного интервала. То же самое и с полем ввода field4. Если ввод не «12345», то он рисует контур и возвращает фокус к полю ввода field4.

В FF и IE поведение таково, что при неверном вводе вместо фокуса, возвращающегося к тому же самому полю ввода, он переходит к следующему полю.

Куда я иду не так?

Заранее спасибо за помощь.