Windows版Google Chrome提交表单时必填checkbox不显示验证弹窗问题

架构老林

2026-9-26

Windows Chrome 复选框required验证异常修复方案

该问题属于Windows版Chrome 96.x版本的已知内核兼容bug，原生表单提交时不会主动触发复选框的required校验提示，Mac平台同版本Chrome无此问题，可选择以下任意方案解决：

方案1：主动调用原生验证API（改动最小，保留原生提示样式）

监听表单submit事件，手动触发验证上报逻辑即可绕开触发异常问题，示例代码如下：

<form action="/" id="testForm">
  <label for=x>Hello</label>
  <input type=checkbox id=x required>
  <button type=submit> click me</button>
</form>

<script>
const form = document.querySelector('#testForm')
form.addEventListener('submit', (e) => {
  // 主动调用验证上报方法，兼容Windows Chrome的触发异常
  if (!form.reportValidity()) {
    e.preventDefault()
  }
})
</script>

方案2：自定义校验逻辑（兼容性最优，支持自定义提示样式）

如果需要适配更多低版本浏览器，可自行实现复选框勾选校验，完全绕开原生验证的兼容问题：

<form action="/" id="testForm">
  <label for=x>Hello</label>
  <input type=checkbox id=x required>
  <span class="tip" style="color: red; display: none;">请勾选此选项</span>
  <button type=submit> click me</button>
</form>

<script>
const form = document.querySelector('#testForm')
const checkbox = document.querySelector('#x')
const tip = document.querySelector('.tip')
form.addEventListener('submit', (e) => {
  if (!checkbox.checked) {
    e.preventDefault()
    tip.style.display = 'inline'
    // 勾选后自动隐藏错误提示
    checkbox.addEventListener('change', () => {
      tip.style.display = checkbox.checked ? 'none' : 'inline'
    }, { once: true })
  }
})
</script>