jquery fokussiere auf dasselbe Eingabefeld, wenn der Fehler nicht in allen Browsern funktioniert.

Ich habe ein Formular mit mehreren Feldern, das sowohl dynamisch erstellte Felder als auch einige vordefinierte Felder enthält. Eines der Felder verwendet ein JQuery-Timepicker-Plugin mit freundlicher Genehmigung vonhttp: //jonthornton.github.io/jquery-timepicker

Nun meine Frage ist, dass ich eine schnelle Echtzeitüberprüfung des Felds durchführe, da es unscharf ist. Wenn die Überprüfung fehlschlägt, wird ein Fehler angezeigt und der Fokus wird wieder auf dieses Feld gesetzt. Jetzt funktioniert mein Code auf Chrome so wie er sollte, aber auf IE 11 und Firefox wird die (eingabedatei) .focus () nicht ausgelöst, sodass der Fokus nicht wieder auf das Feld gesetzt wird.

Hier ist meine Code-Geigehttp: //jsfiddle.net/8cL42bcy/6

Das folgende ist das gleiche Code-Snippet hier ...

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

Jetzt in Chrome ist das Verhalten wie folgt ...

tab durch das Feld Zeitfenster und geben Sie Kauderwelsch und Tab oder Fokus aus, es zeigt eine Meldung und der Fokus ist wieder auf dem Feld Zeitfenster. Gleiches gilt auch für das Eingabefeld field4. Wenn die Eingabe nicht "12345" ist, wird ein Umriss gezeichnet und der Fokus auf das Eingabefeld field4 zurückgesetzt.

In FF und IE ist das Verhalten so, dass bei ungültiger Eingabe der Fokus zurück zum gleichen Eingabefeld und zum nächsten Feld wechselt.

Wo gehe ich falsch?

ielen Dank im Voraus für die Hilf