jQuery focus not working

Question

I am trying to focus on credit card validation fail. but strange focus() not working.

$('#cc_number').validateCreditCard(function (result) {
    if (result.length_valid && result.luhn_valid) {

    } else {
       $("#cc_number").focus();
       return false;
    }
});

<input  type="text" id='cc_number' name="cc_number" />

Answer 1

As mentioned in the comments, your original jsfiddle contains the solution.

A workaround is to put a timeout on the focus call.

setTimeout(function(){     $("#cc_number").focus(); }, 0); 

I'm not 100% sure, but it could be that as the alert is called on blur, you're never actually allowing the textbox to lose focus, and therefore when focus is called, it already has it.

By using a timeout, you are putting the logic into a seperate thread, which runs seperate to the main javascript code (much like a callback function).

---

But as your question comments also mention, forcing focus until validation passes is annoying.

But this is more of a UX criticism.

Answer 2

Your DOM may be getting refresh so focus is not working here. Instead you can follow this approach:

$('#cc_number').validateCreditCard(function (result) {     if (result.length_valid && result.luhn_valid) {     } else {       $("#cc_number").attr("autofocus","autofocus")       return false;    } });