如何实现HTML表单必填项校验通过后提交再跳转至感谢页

你当前的代码直接给提交按钮绑定了点击跳转逻辑，完全绕过了浏览器原生的表单校验规则：只要点按钮就会执行跳转，根本不会检查带required属性的必填项是否填写、邮箱格式是否符合要求。
另外你写的内联onclick="submit()"、直接监听按钮click事件的写法，本身就会跳过表单校验流程，这也是你配置form的action属性不生效的核心原因——点击事件触发跳转的优先级比原生表单提交逻辑更高。

• 移除提交按钮上冗余的内联onclick="submit()"属性
• 删除原有绑定在提交按钮上的点击跳转JS代码
• 改为监听表单本身的submit事件：这个事件只会在所有原生校验（required校验、格式校验）全部通过后才会触发，天然满足你的校验需求
• 在提交事件回调里先阻止默认表单提交行为，避免和你用SMTP发信的逻辑冲突，等发信逻辑执行完成后再执行跳转
• 顺手修复CSS选择器错误：你写的.form button:active选择器不生效，因为你的form标签没有加form类名，改为form button:active即可让按钮按下的位移效果正常显示

JS部分 #

把你原来的按钮点击事件代码替换成下面的内容：

document.getElementById("contact-form").addEventListener("submit", function (e) {
  // 阻止原生表单默认提交行为
  e.preventDefault();

  // 这里放你使用SMTPjs发送邮件的业务逻辑
  // 可以等发送成功的回调触发后再执行跳转，逻辑更严谨

  // 校验通过、发信逻辑执行完成后跳转至感谢页
  location.href = "/contactty.html";
});

HTML部分 #

只需要修改提交按钮那一行，删掉内联的onclick属性即可，其他内容保持不变：

<button type="submit" id="submit" name="submit">Send</button>

CSS部分 #

修正按钮按下状态的选择器：

form button:active {
  box-shadow: none;
  transform:  translateY(8px);
}

改完之后的效果：

• 所有必填项为空、邮箱格式错误、未勾选服务协议复选框时，点击提交按钮会触发浏览器原生的错误提示，不会执行跳转
• 所有字段校验通过后，才会执行发信逻辑，之后自动跳转到感谢页
• 即使JS加载失败，form标签上配置的action属性也会兜底生效，校验通过后正常跳转到感谢页

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