如何实现表单文本字段组任意填写一项即可提交的校验规则

现有代码无法实现需求的核心原因有3点：

• 所有OVD对应的复选框都添加了required属性，HTML原生表单校验会强制要求所有带该属性的复选框必须勾选，和"任意一项满足即可"的规则冲突
• 3个文本输入框使用了完全相同的name属性值，提交后后端无法区分接收到的是哪个证件的号码
• 没有配置组级自定义校验，原生校验不支持"组内至少一个字段有效即可提交"的或逻辑判断

通过移除原生全局required属性+自定义JS校验+选项联动的方式实现，核心规则：

1. 整组OVD选项至少勾选1个复选框，且勾选项对应的输入框必须填写内容
2. 未勾选的选项对应的输入框不需要填写，不会阻塞提交
3. 只要有一组（复选框勾选+对应输入框有有效内容）满足要求，整组校验通过，表单即可正常提交

修正后完整代码 #

<form id="ovdForm">
<div class="row">
  <div class="border border-dark d-flex">
    <p class="d-inline ps-1">1.</p>
    <p class="d-inline ps-4">Certified copy of OVD or equivalent e-document of OVD or OVD obtained through digital KYC process needs to be submitted (any one of the following OVDs)</p>
  </div>
</div>
<div class="row ovd-group">
  <div class="border border-dark col-md-6 ps-4">
    <input type="checkbox" name="OVD_type" value="passport" class="check d-inline">
    <h4 class="d-inline">A. Passport Number</h4>
  </div>
  <div class="border border-dark col-md-6">
    <input type="text" class="input form-control border-0 ovd-input" name="passport_number" disabled>
  </div>
</div>
<div class="row ovd-group">
  <div class="border border-dark col-md-6 ps-4">
    <input type="checkbox" name="OVD_type" value="voter" class="check d-inline">
    <h4 class="d-inline">B. Voter ID Card</h4>
  </div>
  <div class="border border-dark col-md-6">
    <input type="text" class="input form-control border-0 ovd-input" name="voter_number" disabled>
  </div>
</div>
<div class="row ovd-group">
  <div class="border border-dark col-md-6 ps-4">
    <input type="checkbox" name="OVD_type" value="driving" class="check d-inline">
    <h4 class="d-inline">C. Driving Licence</h4>
  </div>
  <div class="border border-dark col-md-6">
    <input type="text" class="input form-control border-0 ovd-input" name="driving_number" disabled>
  </div>
</div>
<div class="text-danger mt-2" id="ovdError" style="display: none;">请至少选择一种OVD类型并填写对应证件号码</div>
<input type="submit" class="mt-3">
</form>

<script>
const form = document.getElementById('ovdForm');
const ovdGroups = document.querySelectorAll('.ovd-group');
const errorTip = document.getElementById('ovdError');

// 复选框与输入框联动：勾选后才启用对应输入框
ovdGroups.forEach(group => {
  const checkbox = group.querySelector('.check');
  const input = group.querySelector('.ovd-input');
  checkbox.addEventListener('change', () => {
    input.disabled = !checkbox.checked;
    if(!checkbox.checked) input.value = ''; // 取消勾选时自动清空对应输入内容
  })
})

// 表单提交自定义校验
form.addEventListener('submit', (e) => {
  e.preventDefault();
  let isValid = false;
  // 遍历所有选项组，只要存在「勾选复选框+输入框有内容」的项即判定校验通过
  ovdGroups.forEach(group => {
    const checkbox = group.querySelector('.check');
    const input = group.querySelector('.ovd-input');
    if(checkbox.checked && input.value.trim() !== '') {
      isValid = true;
    }
  })

  if(isValid) {
    errorTip.style.display = 'none';
    // 校验通过后执行提交逻辑
    form.submit();
  } else {
    errorTip.style.display = 'block';
  }
})
</script>

逻辑调整说明 #

• 移除了所有复选框、输入框上原生的required属性，避免原生校验强制要求所有项必填
• 复选框统一使用name="OVD_type"通过value区分选项，输入框使用独立name对应不同证件号，后端可正常识别接收数据
• 默认禁用所有输入框，只有勾选对应复选框后才允许输入，避免用户误填未选择的证件类型

如果不需要复选框勾选逻辑，只要任意一个输入框填写内容就允许提交，只需要把校验判断条件改为「任意一个.ovd-input的内容非空」即可，同时可以移除复选框相关的联动代码。

内容的提问来源于stack exchange，提问作者Md Mohtesham Azam