如何通过JavaScript触发带required属性HTML表单的验证与提交

原有方案失效原因 #

• form.submit()是浏览器刻意设计为跳过验证的提交方法，会绕过所有前端校验逻辑、直接提交表单，不符合需求
• 提交按钮click()不生效通常由事件阻止逻辑、DOM选择错误、页面加载时序问题导致，依赖按钮触发的方式稳定性较差

推荐实现方案 #

HTML5标准提供了原生方法支持编程触发完整的表单验证流程，不需要依赖提交按钮存在，可在任意事件处理函数中调用：

方案1：requestSubmit（优先使用）

form.requestSubmit()的行为和用户点击submit按钮完全一致，会依次触发内置校验、submit事件监听，验证通过才会提交表单，是最贴合需求的实现：

function validateAndSubmit(){
  const targetForm = document.querySelector("form")
  // 触发和点击submit按钮完全一致的验证提交流程
  targetForm.requestSubmit()
}

如果仅需要触发验证、弹出原生错误提示，不需要提交表单，直接调用targetForm.reportValidity()即可，该方法会返回布尔值表示校验是否通过，同时弹出浏览器自带的错误提示浮层。

方案2：旧浏览器降级兼容

如果需要适配不支持requestSubmit的旧版本浏览器，可以手动校验后再提交：

function validateAndSubmit(){
  const targetForm = document.querySelector("form")
  // 触发校验并弹出原生提示
  const isPass = targetForm.reportValidity()
  if (isPass) {
    // 校验通过后再提交表单
    targetForm.submit()
  }
}

以上两种方案都可以封装为公共方法，在任意事件处理逻辑中调用复用。

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