我已将焦点设置为返回输入框，但似乎没有焦点？

Question

I have created a form with an input box, if the entry is invalid it will create an alert box, I want the focus to return to the input box, however, the code I have written doesn't seem to do it. I am sure it is correct.

I have copied the code snippet below:

HTML:

<form name="myform" onsubmit="validate()"> 
            Amount   <input name="num" id="principal"><br/>  </form>


        

JS:

function validate(){  
  var num = document.myform.num.value;  
  if (isNaN(num) || num == 0 || num < 0 || num == null) {  
    alert("Please enter a valid entry")
    document.getElementsById("principal").focus(); }
  else {  
    return true;  
    }  
  }  

Please can someone show me where I am going wrong?

Answer 1

Do you have any error outputs in your console? "getElementsById" is not valid. It should be "getElementById".

You also should implement something to prevent the default submit behaviour. Here you can find a adapted and working fiddle:

 document.getElementById('submitbutton').addEventListener('click',function(event){ event.preventDefault(); validate(); }); function validate(){ var num = document.myform.num.value; if (isNaN(num) || num == 0 || num < 0 || num == null) { alert("Please enter a valid entry") document.getElementById("principal").focus(); } else { return true; } }

 <form name="myform" onsubmit="validate()"> Amount <input name="num" id="principal"><br/> <button id="submitbutton">Submit</button> </form>