jquery focus back to the same input field on error not working on all browsers

I have a form with multiple fields which has both dynamically created fields and some pre defined fields. one of the field uses a jquery timepicker plugin courtesy of http://jonthornton.github.io/jquery-timepicker/

Now my question is I am doing a quick real time validation of the field as it is blurred out of focus and if the validation fails, display an error and bring the focus back to that field. Now my code works as it should on chrome but on IE 11 and Firefox, the (inputfiled).focus() is not fired hence the focus is not brought back to the field.

Here is my code fiddle http://jsfiddle.net/8cL42bcy/6/

The following is the same code snippet here...

$(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/
    '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);
  }).on('timeRangeError', function() {
    if ($('#presentationTime').val() != null || $('#presentationTime').val() != "") {
      $("#errormsg").css("display", "inline").fadeOut(4000);
  // end timepicker function

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

        #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>time slot::
<input type="text" id="presentationTime" name="presentationTime" size="10" value="" placeholder="HH:mm A"><span id="errormsg">Valid Time required!</span>

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

Now in Chrome, the behavior is as follows...

tab thru to the field time-slot and enter gibberish and tab out or focus out, it displays a message and the focus is back onto the time-slot field. Same with the field4 input field as well. If the input is not "12345" then it draws an outline and brings focus back to the field4 input field.

In FF and IE, the behavior is that upon invalid entry , instead the focus coming back to the same input field , it goes to the next field.

Where am I going wrong?

Thanks in advance for the help.



It is an implementation bug in Firefox and IE, you can solve it using a timer. This is the new fiddle: http://jsfiddle.net/8cL42bcy/8/

I've added setTimeout(function() { $('#field').focus(); }, 50); at the end.

It will not affect Chrome in any way, because there is already focused.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.