jquery concentra-se novamente no mesmo campo de entrada quando o erro não funciona em todos os navegadores
Eu tenho um formulário com vários campos que tem campos criados dinamicamente e alguns campos predefinidos. um dos campos usa um plugin jquery timepicker, cortesia dehttp://jonthornton.github.io/jquery-timepicker/
Agora, minha pergunta é: estou fazendo uma rápida validação em tempo real do campo, pois ele fica desfocado e, se a validação falhar, exibe um erro e traga o foco de volta para esse campo. Agora, meu código funciona como deveria no chrome, mas no IE 11 e no Firefox, o (inputfiled) .focus () não é acionado, portanto, o foco não é trazido de volta ao campo.
Aqui está o meu código violinohttp://jsfiddle.net/8cL42bcy/6/
O seguinte é o mesmo trecho de código aqui ...
$(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>
Agora no Chrome, o comportamento é o seguinte ...
guia até o intervalo de tempo do campo e digite sem sentido e tabulação ou foco, ele exibe uma mensagem e o foco volta ao campo do intervalo de tempo. O mesmo com o campo de entrada field4 também. Se a entrada não for "12345", ela desenha um contorno e traz o foco de volta ao campo de entrada field4.
No FF e no IE, o comportamento é que, após a entrada inválida, em vez do foco voltar ao mesmo campo de entrada, ele passa para o próximo campo.
Onde eu estou errando?
Obrigado antecipadamente pela ajuda.