HTML表单必填单选框校验错误弹窗提示文本是否支持自定义修改？

有两种可落地的实现方案，你可以根据需求选择：

方案1：修改原生校验弹窗的提示文本 #

直接在单选input标签上添加oninvalid和oninput事件属性，调用原生setCustomValidity方法自定义提示内容即可，无需引入额外依赖。

• 注意：同组所有name属性相同的单选按钮都需要添加相同的事件属性，否则会出现部分场景仍显示默认提示的问题。

修改后的代码示例：

<input 
  id="Q1_r1" 
  name="Question_1" 
  required="" 
  type="radio" 
  value="Very Bad"
  oninvalid="this.setCustomValidity('请选择该题的选项后再提交')"
  oninput="this.setCustomValidity('')"
>
<label class="radio" for="Q1_r1">
  <span style="padding-left:30px; font-size:13px;">非常差</span>
</label>

方案2：完全自定义校验逻辑和提示样式 #

如果需要自定义提示的样式、位置，不想用浏览器自带的弹窗样式，可以选择完全自定义校验逻辑：

1. 给form标签添加novalidate属性，禁用浏览器原生校验功能
2. 监听表单的submit事件，手动校验单选组是否有选中值
3. 校验不通过时阻止表单提交，展示你自定义的友好提示

代码示例：

<!-- 表单部分 -->
<form id="surveyForm" novalidate>
  <input id="Q1_r1" name="Question_1" required="" type="radio" value="Very Bad">
  <label class="radio" for="Q1_r1"><span style="padding-left:30px; font-size:13px;">非常差</span></label>
  <!-- 其余单选按钮代码 -->
  <button type="submit">提交表单</button>
</form>

// 校验逻辑部分
const form = document.getElementById('surveyForm');
form.addEventListener('submit', function(e) {
  // 校验第一题单选是否选中
  const q1Selected = document.querySelector('input[name="Question_1"]:checked');
  if (!q1Selected) {
    e.preventDefault();
    // 此处可替换为页面内自定义提示、UI组件弹窗等逻辑
    alert('请选择第一题的选项后再提交');
    return;
  }
  // 其余校验逻辑、表单提交逻辑
});

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