能否获取浏览器输入验证消息？复用单选框验证信息实现复选框组校验

你可以通过两种核心方式实现将原生单选框的验证消息映射到复选框组，既保留原生国际化能力，又不需要完全依赖setCustomValidity自定义内容：

1. 直接映射validationMessage属性 #

通过给复选框组中的某个控件重写validationMessage的getter，让它直接返回隐藏单选框的原生验证消息。同时同步复选框状态到隐藏单选框，确保验证逻辑联动。

代码示例 #

<form id="checkboxForm">
  <!-- 隐藏的必填单选框，用于提供原生国际化验证消息 -->
  <input type="radio" name="hiddenRequiredRadio" id="hiddenRadio" style="display: none;" required>
  
  <!-- 实际的复选框组 -->
  <div class="checkbox-group">
    <input type="checkbox" name="formOptions" value="opt1">选项1
    <input type="checkbox" name="formOptions" value="opt2">选项2
    <input type="checkbox" name="formOptions" value="opt3">选项3
  </div>
  
  <button type="submit">提交</button>
</form>

<script>
const hiddenRadio = document.getElementById('hiddenRadio');
const checkboxes = document.querySelectorAll('.checkbox-group input');
const form = document.getElementById('checkboxForm');

// 同步复选框选中状态到隐藏单选框
checkboxes.forEach(cb => {
  cb.addEventListener('change', () => {
    const hasChecked = Array.from(checkboxes).some(item => item.checked);
    hiddenRadio.checked = hasChecked;
  });
});

// 给第一个复选框映射单选框的原生验证消息
Object.defineProperty(checkboxes[0], 'validationMessage', {
  get() {
    return hiddenRadio.validationMessage;
  }
});

// 表单提交时验证联动
form.addEventListener('submit', (e) => {
  if (!hiddenRadio.checkValidity()) {
    e.preventDefault();
    // 触发第一个复选框的验证提示，显示单选框的原生消息
    checkboxes[0].reportValidity();
  }
});
</script>

2. 利用表单invalid事件重定向提示 #

监听表单的invalid事件，当隐藏单选框触发验证失败时，将提示重定向到复选框控件上，复用单选框的原生消息。

代码示例 #

// 给表单添加invalid事件监听（捕获阶段触发）
form.addEventListener('invalid', (e) => {
  if (e.target === hiddenRadio) {
    e.preventDefault();
    // 选择任意一个复选框来显示验证消息
    const targetCheckbox = checkboxes[0];
    targetCheckbox.setCustomValidity(hiddenRadio.validationMessage);
    targetCheckbox.reportValidity();
    // 重置自定义消息，避免影响后续正常验证
    targetCheckbox.setCustomValidity('');
  }
}, true);

关键注意事项 #

• 隐藏单选框必须设置required属性，才能触发原生的“请选择一项”类国际化提示，且name属性要避免和其他表单控件冲突。
• 同步复选框状态到单选框时，确保只要有一个复选框被选中，单选框就设为checked，反之取消，这样才能联动验证逻辑。
• 原生验证消息的国际化完全依赖浏览器的语言设置，无需额外配置，单选框会自动生成对应语言的提示文本。

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