Tengo un formulario con múltiples campos que tiene campos creados dinámicamente y algunos campos predefinidos. uno de los campos utiliza un complemento jquery timepicker por cortesía dehttp://jonthornton.github.io/jquery-timepicker/

Ahora mi pregunta es que estoy haciendo una validación rápida en tiempo real del campo, ya que está desenfocado y si la validación falla, muestra un error y devuelve el foco a ese campo. Ahora mi código funciona como debería en Chrome pero en IE 11 y Firefox, el (inputfiled) .focus () no se dispara, por lo tanto, el foco no se devuelve al campo.

Aquí está mi violín de códigohttp://jsfiddle.net/8cL42bcy/6/

El siguiente es el mismo fragmento de código aquí ...

$(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>

Ahora en Chrome, el comportamiento es el siguiente ...

tabule hasta el intervalo de tiempo del campo e ingrese galimatías y separe o enfoque, muestra un mensaje y el foco vuelve al campo de intervalo de tiempo. Lo mismo con el campo de entrada field4 también. Si la entrada no es "12345", dibuja un contorno y vuelve a enfocar el campo de entrada field4.

En FF e IE, el comportamiento es que ante una entrada inválida, en lugar de que el foco vuelva al mismo campo de entrada, pasa al siguiente campo.

¿A dónde me estoy yendo mal?

Gracias de antemano por la ayuda.