如何用JavaScript验证HTML表单？原有代码失效，表单空内容仍提交

嘿，我一眼就瞅出你代码里的两个关键问题啦，这就是为啥表单会无视验证直接提交的原因：

• 验证字段完全不匹配：你写的validateForm函数里一直在检查form.title.value，但你的表单里根本没有title这个输入项啊！你实际要验证的是fname（First Name）对吧？而且错误提示元素你也写的是titleRequired，但表单里对应的是fNameRequired，这完全对不上嘛。
• 函数未返回验证结果：你的函数最后没有return valid;语句！哪怕你把valid设成了false，因为函数没返回值，浏览器会默认当作返回true处理，所以表单照样提交。这是新手做表单验证最容易踩的坑之一。

给你修正后的代码，你可以直接用：

function validateForm(form) {
  var valid = true;
  // 现在检查的是fname字段，对应表单里的输入项
  if (!form.fname.value.length) {
    valid = false;
    document.getElementById('fNameRequired').style.display = "inline-block";
  } else {
    document.getElementById('fNameRequired').style.display = "none";
  }
  // 一定要返回valid的值，告诉浏览器是否允许提交
  return valid;
}

你的HTML表单可以保留，不过要确保错误提示的样式默认是隐藏的，这样验证不通过时才会显示出来：

<form id="form" action="register.php" method="post" onsubmit="return validateForm(this)">
  <h2> create profile: </h2>
  <div>
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="fname" placeholder="Given Name">
    <span class="error" id="fNameRequired" style="display:none;">first name required</span>
    <span class="error" id="capitalRequired" style="display:none;">first letter must be capital</span>
  </div>
  <div>
    <input type="submit" value="Submit" name="submit" >
  </div>
</form>

后续你添加更多输入项的时候，只需要在validateForm函数里按照这个逻辑扩展就行——每加一个字段，就加一段对应的检查代码，记得最后始终要返回valid哦！

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