JavaScript表单验证不生效：未通过验证表单仍提交问题求助

嘿，我一眼就瞅出你这代码的问题啦，核心就是验证函数没返回结果，还有几个小细节拖了后腿，给你一步步捋清楚：

最关键的bug：validateForm没返回验证结果 #

你在函数最后计算了result = firstNameValid() && phoneValid();，但完全没把这个结果return出去啊！表单的onsubmit事件必须拿到一个布尔值——返回false才会阻止提交，你现在相当于没给返回值，浏览器默认就当true处理，所以不管验证过没过，都会直接提交。

还有两个小坑要填 #

1. 内部函数外部访问不到：你把firstNameValid和phoneValid塞在validateForm里面了，这意味着input标签上写的onsubmit="return firstNameValid()"根本找不到这些函数，而且更重要的是——input元素本身就没有onsubmit事件！这个事件只属于<form>标签，所以那些绑定完全是无效的，直接删掉就行。
2. 重复调用验证函数：你在validateForm里先单独调用了一遍firstNameValid()和phoneValid()，之后又在计算result时再调用一次，完全没必要，一次调用就够啦。

修正后的完整代码 #

JavaScript（核心是加了return） #

function validateForm () {
  var firstName = document.getElementById('fname').value;
  var phoneNumber = document.getElementById('phonenumber').value;

  function firstNameValid () {
    // 加个trim防止用户只输入空格绕过验证
    if (firstName.trim() === "") {
      console.log("First name empty")
      return false;
    } else {
      return true;
    };
  };

  function phoneValid () {
    // 注意你原注释写的是"not exceed"但逻辑是<10，应该是笔误吧？改成至少10位更合理
    if (!phoneNumber || phoneNumber.trim() === "" || phoneNumber.length < 10) {
      console.log("Phone number must be defined and at least 10 characters")
      return false;
    } else {
      return true;
    }
  };

  // 重点！把验证结果返回给onsubmit事件
  return firstNameValid() && phoneValid();
};

HTML（删掉无效的onsubmit绑定） #

<body>
  <form name="registration" action="page2.html" onsubmit="return validateForm()" method="GET">
    <ul>
      <li>
        <label for="fname">First Name:</label><br>
        <input type="text" id="fname" name="fname"><br>
      </li>
      <li>
        <label for="phonenumber">Phone Number:</label><br>
        <input type="text" id="phonenumber" name="phonenumber">
      </li>
    </ul>
    <button type="submit" value="Submit">Submit</button>
  </form>
  <script src="app.js"></script>
</body>

额外提个优化建议 #

现在你只是在控制台打印错误，用户可能看不到，不如给每个输入框加个错误提示区域，验证不通过时显示文字提示，比如在fname输入框下面加个<span id="fname-error" style="color:red;"></span>，然后在firstNameValid里修改这个元素的内容，这样用户体验会好很多~

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