javascript focus() isn't focusing

Question

Regular text field, user enters a string. Test whether a) there's something in the input, b) that there's no whitespace in the input, and c)is integers only, no other characters. Then the submit button. You'll note that I'm not using html behavior, there's no onclick in the input, strict Content/Presentation/Behavior separation.

My HTML:

<form name="basicText" id="basicText" action="">
<p>Enter any ol' integer: 
<input type="text" id="inputBox" name="inputBox" size="14"/>    
<input value = "Next...?" type="submit" id="mySubmitBtn" name="mySubmitBtn"/>
</p>
</form>
<script src="js/w1bscript.js" type="text/javascript"></script>

Note also that the external javascript file is added at the end of the so all elements can load (not worrying about onload right now).

The JavaScript:

var myButton1 = document.getElementById("mySubmitBtn");
var myForm1 = document.getElementById("basicText");
var myTextBox = myForm1.inputBox;

function submitPress() {
 if(myTextBox.value.length == 0) {
    alert("You didn't enter anything! Once more time, with feeling...")
    basicText.focus();
    basicText.select();
 } else if(/\s/.test(myTextBox.value)) {
    alert("Eh... No spaces. Just integers. Try again...");
    basicText.focus();
    basicText.select();
  } else if (isNaN(myTextBox.value)==true) {
    alert("Eh... Gonna need you to enter ONLY digits this time. kthnx.");
    basicText.focus();
    basicText.select();
 } else {
    // The textbox isn't empty, and there's no spaces. Good.
    alert("you've passed the test!")
  }
}
myButton1.addEventListener('click', submitPress, false);

When I enter an incorrect input, the logic works, but the cursor isn't focusing back to the text box, no matter what browser I use.

Fiddle: http://jsfiddle.net/2CNeG/

Thank you, Don

Solution 1

You will observe that once you have commented your alert box you will be able to see your focus working.But there is a solution for the same. Do try this one.I think it should work.

setTimeout(function() {
      document.getElementById('inputBox').focus();
    }, 0);

Solution 2

It looks to me like you are focusing on your form element; you need to focus on your text boxes instead:

document.getElementById('inputBox').focus();

or myTextBox.focus() in your code.

Comments

[bfavaretto]

@DonG You also seem to be submitting the form regardless of passing validation or not.

[Authman Apatira]

Yup; it would be better for him to use type='button' --OR-- to return false in the validation function for those paths where validation fail.

[DonG]

Okay, I see your point, I've changed it to myTextBox.focus(); and still no focus to the input/text box.