HTML表单required校验失效 空值仍经XMLHttpRequest提交问题排查

• 事件绑定位置错误：你把提交逻辑绑在了提交按钮的onclick事件上，而HTML原生的required属性校验，只会在表单触发原生submit事件前执行，点击按钮时校验逻辑还未运行，你的AJAX请求就已经发送了。
• 事件流被打断：你在按钮的onclick里写了return false，直接截断了表单原生事件流，导致浏览器内置的必填校验完全没有执行机会。
• 事件对象使用不规范：直接在函数内调用全局event对象的写法兼容性差，且你没有判断表单校验结果，无论字段是否为空都会执行AJAX发送逻辑。
• 额外小问题：代码中第一个表单标签拼写错误，把label写成了lable，会导致点击"User ID"文字无法聚焦到对应输入框。

不要监听按钮点击事件，改为监听表单的submit事件，先阻止表单默认的同步跳转行为，再调用表单原生的checkValidity()方法判断必填项校验是否通过，校验通过后再发送AJAX请求。
修正后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first assignment</title>
  </head>
  <body>
    <div class="somebox"></div>
    <ul>
      <h3>Team 1 Online Exam System</h3>
    </ul>
    <!-- 给表单加id，移除按钮上的onclick绑定 -->
    <form id="loginForm" action="" method="POST">
      <div name="form header" class="formhead">
        <h1>Welcome</h1>
        <p><span id="loginerr" class="err_alert"></span></p>
      </div>
      <div class="login_box">
        <!-- 修正lable拼写错误为label -->
        <label for="user_id">User ID</label>
        <input type="text" placeholder="Enter User ID" id="user_id" required>

        <label for="password">Password</label>
        <input type="password" placeholder="Enter Password" id="password" required>

        <button id="but" type="submit">Login</button>
      </div>
    </form>
    <div class="footer"></div>

    <script>
      // 监听表单submit事件，传入事件对象e
      document.getElementById('loginForm').addEventListener('submit', function(e) {
        // 阻止表单默认同步提交跳转
        e.preventDefault();
        // 先执行原生表单校验，校验不通过直接终止逻辑
        if (!this.checkValidity()) {
          return;
        }
        // 校验通过后再取参数发AJAX
        var user_id = document.getElementById("user_id").value;
        var pass = document.getElementById("password").value;
        var xmlhttp = new XMLHttpRequest();
        var theUrl = "/submit_test";
        xmlhttp.open("POST", theUrl);
        xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                console.log("success");
            }
        }
        xmlhttp.send(JSON.stringify({ "ProgMode": user_id, "pass": pass }));
      })
    </script>
  </body>
</html>

• 必填项为空时，浏览器会自动弹出原生的必填提示，不会发送AJAX请求
• 所有必填项填写完成后，才会通过XMLHttpRequest发送JSON格式的表单数据
• 修正了label拼写问题，点击对应文字可以正常聚焦输入框

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