HTML5 required属性与submit按钮onclick事件冲突无法同时生效如何解决

问题原因 #

你写的写法不生效是因为submit按钮的click事件触发优先级高于表单原生required校验逻辑，点击后会先执行你绑定的signUp方法，浏览器未触发原生校验就执行了自定义逻辑，若方法内未做提交拦截还会直接触发表单跳转，导致校验失效。
另外你提供的代码示例中submit输入框的type属性少了闭合引号，需先修正避免额外的解析异常。

可行解决方法 #

方案1：绑定表单submit事件（最推荐） #

原生表单的submit事件只会在所有表单项校验通过后触发，完全符合你的需求，无需额外写校验逻辑。
HTML代码调整：

<form id="registerForm">
  <input type="text" required="required" />
  <input type="submit" value="注册" />
</form>

JS代码调整：

// 绑定表单的submit事件，而非按钮的click事件
document.querySelector('#registerForm').addEventListener('submit', function(e) {
  // 执行到此处说明required校验已经通过
  e.preventDefault() // 若不需要原生表单跳转提交（比如异步提交）则添加该行
  signUp() // 执行你的自定义业务逻辑
})

方案2：click事件内手动触发校验 #

如果必须保留按钮的onclick绑定，可以在业务逻辑执行前手动调用表单的原生校验方法checkValidity()判断校验结果：
HTML代码保持你期望的写法即可：

<form>
  <input type="text" required="required" />
  <input type="submit" onclick="signUp()" />
</form>

JS代码调整：

function signUp() {
  const targetForm = document.querySelector('form') // 替换为你实际的表单选择器
  // 手动触发原生校验，不通过直接终止逻辑，同时会弹出原生的校验提示
  if (!targetForm.checkValidity()) return
  // 校验通过后执行后续业务逻辑
}

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