I am using jquery to keep the focus on a text box on blur if validation fails. But Its working in IE but not working FF. Any suggestions?
$("#inputBoxId").blur(function () {
if ($(this).val() < 10)
$("#inputBoxId").focus();
});
$( "#field1" ). blur(function() { alert( "Lose focus from Field1" ); }); Note : In jQuery blur( handler ) method is used to bind an event handler to the "blur" JavaScript event, or trigger that event on an element.
The blur event fires when an element has lost focus. The main difference between this event and focusout is that focusout bubbles while blur does not. The opposite of blur is focus . This event is not cancelable and does not bubble.
jQuery blur() MethodThe blur event occurs when an element loses focus. The blur() method triggers the blur event, or attaches a function to run when a blur event occurs. Tip: This method is often used together with the focus() method.
handleBlur is how touched is actually updated (or at least one of the ways). If your input isn't passed an onBlur handler connecting to Formik's state, the touched state won't be updated.
Looks like you need to use setTimeout according to this question. Since you are giving focus to an element immediately you need to account for some time for the element to go out of focus first.
$("#inputBoxId").blur(function() {
if ($(this).val() < 10) {
setTimeout(function() {
$("#inputBoxId").focus();
}, 100);
}
});
Example of it working on jsfiddle, tested out on chrome dev channel, firefox, and IE8.
val()
will return string, not number. Try converting and it should work:
var value = parseInt($(this).val(), 10);
if (isNaN(value) || value < 10)
$("#inputBoxId").focus();
This will also deal with non numeric values.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With