表单验证触发错误提示但仍自动提交问题求助

核心问题 #

你的验证函数存在致命错误：你将输入框的字符串值赋值给了name变量，之后调用name.focus()时，字符串并没有focus()方法，这会触发JavaScript报错，导致函数执行中断，无法正常返回false，因此表单会继续执行提交操作。

修正后的代码 #

JavaScript 部分 #

function Validate() {
  // 获取输入框DOM元素，而非它的文本值
  const nameInput = document.forms.ValidateForm.name;
  const name = nameInput.value.trim(); // 去除首尾空格，优化验证逻辑
  console.log(name);

  // 用正则表达式简化数字检查，更简洁高效
  const hasNumbers = /\d/.test(name);
  if (name === "" || hasNumbers) {
    window.alert("Office Name cannot be Empty or contain numbers");
    nameInput.focus(); // 调用DOM元素的focus方法
    return false;
  }

  if (name.length < 3) {
    alert("Office Name must be more than 3 characters");
    nameInput.focus();
    return false;
  }

  return true;
}

HTML 部分（无需修改） #

<form action="#" method="post" enctype="multipart/form-data" name="ValidateForm" onsubmit="return Validate();" id="ValidateForm">
  <input type="text" name="name" id="name">
  <input type="submit" value="Add Office">
</form>

额外优化建议 #

• 用trim()去除输入首尾空格，避免用户输入空字符绕过验证
• 正则表达式/\d/.test(name)替代多个includes检查数字，代码更简洁易维护
• 可给输入框添加required属性作为基础兜底验证，配合自定义逻辑提升体验

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