如何在表单提交前为单选框设置setCustomValidity

你遇到的问题核心在于浏览器表单验证的触发时机：浏览器会在触发submit事件之前，先完成一轮默认的表单验证。只有当验证全部通过时，才会触发submit事件。所以你在submit事件里才给单选框设置自定义错误，这时候默认验证已经通过了，表单早就准备好提交了，设置错误自然拦不住。

正确的实现方案 #

要解决这个问题，你需要先阻止表单的默认提交行为，再设置自定义错误，最后触发浏览器的验证提示。修改后的代码如下：

JavaScript 代码 #

document.querySelector('form').addEventListener('submit', function(e) {
  // 第一步：阻止表单默认提交行为
  e.preventDefault();
  
  const radioBtn = this.querySelector('input[type="radio"]');
  // 设置自定义错误信息
  radioBtn.setCustomValidity('You did it wrong.');
  
  // 触发浏览器的验证提示，此时错误会正常显示，表单也不会提交
  this.reportValidity();
  
  // 如果之后需要在验证通过时手动提交表单，可以加这段逻辑
  // if (this.checkValidity()) {
  //   this.submit();
  // }
});

HTML 代码（保持你的原代码不变） #

<form>
  <label for="radio">
    <input id="radio" type="radio"> Radio button
  </label>
  <br>
  <input type="submit">
</form>

补充说明 #

• e.preventDefault()是关键：它能打断浏览器默认的提交流程，让你有机会在提交前插入自定义验证逻辑。
• reportValidity()方法会触发浏览器的原生验证提示，同时返回验证结果（通过为true，失败为false），这样用户就能看到你设置的自定义错误信息，表单也不会提交。
• 这个方案完全符合你的两个场景需求：不需要修改HTML，只改JS；还能自定义错误提示内容。

内容的提问来源于stack exchange，提问作者crenshaw-dev