DOMContentLoaded绑定事件后点击输入框提前触发validate函数如何解决？

核心错误点 #

• 错误地给输入框#principal绑定了click事件，只要点击输入框就会触发validate()校验，这就是函数执行时机不符合预期的直接原因
• 校验函数内存在API拼写错误：document.getElementsById是错误写法，正确的DOM方法是document.getElementById（没有尾部的s）
• 表单onsubmit属性未加return标识，就算校验不通过表单依然会提交
• 给输入框绑定onsubmit事件无意义，submit是表单元素专属事件，输入框本身不会触发该事件

修复后代码 #

JS代码 #

// 可直接删除原来DOMContentLoaded中绑定的输入框click监听逻辑
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();
    // 校验不通过返回false，阻止表单提交
    return false;
  }
  return true;
}

HTML代码 #

<!-- onsubmit增加return，校验不通过就会拦截提交行为 -->
<form name="myform" onsubmit="return validate()">
  金额 <input name="num" id="principal"><br/>
</form>
<br>

可选优化 #

如果希望输入框失焦时就触发校验、不用等到提交表单，可以给输入框新增blur事件绑定：

<input name="num" id="principal" onblur="validate()">

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