HTML表单required属性不生效，点击提交直接跳转如何解决

问题根因 #

• 你直接将跳转逻辑绑定在提交按钮的onclick事件上，点击按钮时会优先执行你写的signup函数，浏览器原生的表单必填、长度校验逻辑还没触发就已经跳转走了
• signup函数里跳转代码放在最开头，执行跳转后当前页面JS上下文直接销毁，后续获取用户名、弹出欢迎框的逻辑永远不会运行
• 表单默认的提交行为没有被阻止，就算没有跳转逻辑，点击提交按钮也会触发页面刷新

修复方案 #

1. 修改HTML代码 #

• 给form表单添加id便于绑定事件，删除提交按钮上的onclick属性
• 顺带修复现有HTML的不规范问题：password的label上多余的required属性、terms复选框和label的id重复问题
  修改后的核心代码如下：

<form method="post" class="info" id="signupForm">
  <p>
    <label for="username">Username:</label>
    <input type="text" id="username" minlength="6" maxlength="18" required /><br /><br />
  </p>
  <p>
    <label for="email">E-mail:</label>
    <input type="email" id="email" required /><br /><br />
  </p>
  <p>
    <label for="password"> Password:</label>
    <input type="password" id="password" minlength="10" maxlength="18" required /><br /><br />
  </p>
  <p>
    <label for="confirmpass">Confirm password:</label>
    <input type="password" id="confirmpass" minlength="10" maxlength="18" required /><br /><br />
  </p>
  <p>
    <label for="gender">Gender:</label>
    <select id="gender">
      <option id="male"> Male </option>
      <option id="female"> Female </option>
    </select><br /><br />
  </p>
  <p>
    <label for="age">Age:</label>
    <select id="age">
      <option id="young">Young(12-18 years old) </option>
      <option id="youth">Youth(19-40 years old) </option>
      <option id="old">Old(more than 40 years) </option>
    </select><br /><br />
  </p>
  <div class="terms">
    <p>
      <input type="checkbox" id="terms" checked="checked" required />
      <label for="terms" id="terms-label">Agree to terms and conditions </label> <br />
    </p>
  </div>
  <button id="button" class="signUpButton" name="SIGN UP" type="submit">SIGN UP</button> <br /><br /><br /><br />
  <p class="outerAlt">Have an account already?</p>
  <p class="alt"><a href="">SIGN IN</a></p>
</form>

2. 替换原有JS逻辑 #

删除原有signup函数，替换为表单提交事件监听逻辑：

document.getElementById('signupForm').addEventListener('submit', function(e) {
  // 阻止表单默认提交刷新页面的行为
  e.preventDefault();
  // 执行到此处说明浏览器原生的必填、长度、格式校验已经全部通过
  const userid = document.getElementById("username").value;
  alert("Welcome " + userid);
  // 所有逻辑执行完成后再跳转页面
  window.location.replace("file:///C:/Users/hb/Desktop/web%20project/afterlogin.html");
})

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