表单校验不合法时设置输入框focus不生效，请问代码哪里存在问题？

错误点梳理 #

• 方法名拼写错误：document.getElementsById 为错误写法，DOM规范中ID属性全局唯一，对应的获取方法是单数形式 document.getElementById，多写了字母s会导致调用方法报错，后续focus逻辑无法执行。
• 未阻止表单默认提交行为：
  1. 校验不通过的分支没有写return false，表单默认提交逻辑会继续执行
  2. HTML中onsubmit属性没有接收函数返回值，需修改为onsubmit="return validate()"，否则即便函数返回false也无法阻止提交
     表单提交后页面刷新，自然看不到输入框聚焦的效果。
• 校验逻辑存在疏漏：直接读取的input值是字符串类型，未转成数字就做判断，会出现空值、空格输入等场景下的判断误差。

修正后代码 #

HTML代码 #

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

JS代码 #

function validate(){  
  var num = Number(document.myform.num.value); // 统一转成数字做判断
  if (isNaN(num) || num <= 0) {  // 简化判断逻辑，覆盖等于0、小于0、非数字的场景
    alert("Please enter a valid entry");
    document.getElementById("principal").focus(); 
    return false; // 校验不通过，阻止表单提交
  }  
  return true;  
}

内容的提问来源于stack exchange，提问作者IK1987