如何在Bootstrap 5表单验证中确保两个输入框至少一个不为空

步骤1：修改HTML结构 #

给两个输入框添加分组标识，同时配置Bootstrap的错误提示容器：

<form class="needs-validation" action="opportunity_handling.php" novalidate method="POST">

  <div class="form-group col-md-6">
    <label>Opportunity OTC Value:</label>
    <div class="input-group">
      <input type="number" class="form-control" name="valueOTC" data-group="required-pair">
      <div class="invalid-feedback">请填写OTC或MRC其中一个值</div>
    </div>
  </div>

  <div class="form-group col-md-6">
    <label>Opportunity MRC Value:</label>
    <div class="input-group">
      <input type="number" class="form-control" name="valueMRC" data-group="required-pair">
      <div class="invalid-feedback">请填写OTC或MRC其中一个值</div>
    </div>
  </div>

  <!-- 其他带required属性的表单字段 -->
  <button type="submit" class="btn btn-primary">提交</button>
</form>

步骤2：添加自定义验证脚本 #

通过JS监听表单提交事件，实现“至少一个不为空”的验证逻辑，同时兼容Bootstrap原生验证样式：

document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('.needs-validation');
  const pairInputs = form.querySelectorAll('[data-group="required-pair"]');

  form.addEventListener('submit', function(e) {
    // 检查两个输入框是否都为空
    const allEmpty = Array.from(pairInputs).every(input => input.value.trim() === '');
    
    if (allEmpty) {
      e.preventDefault();
      e.stopPropagation();
      // 标记输入框为无效状态，显示错误提示
      pairInputs.forEach(input => {
        input.classList.add('is-invalid');
        input.parentElement.querySelector('.invalid-feedback').style.display = 'block';
      });
    } else {
      // 清除无效状态
      pairInputs.forEach(input => {
        input.classList.remove('is-invalid');
        input.parentElement.querySelector('.invalid-feedback').style.display = 'none';
      });
    }

    // 触发Bootstrap原生验证（处理其他带required的字段）
    form.classList.add('was-validated');
  });

  // 输入时实时更新验证状态
  pairInputs.forEach(input => {
    input.addEventListener('input', function() {
      const allEmpty = Array.from(pairInputs).every(i => i.value.trim() === '');
      if (!allEmpty) {
        pairInputs.forEach(i => {
          i.classList.remove('is-invalid');
          i.parentElement.querySelector('.invalid-feedback').style.display = 'none';
        });
      }
    });
  });
});

说明 #

• 其他表单字段直接使用required属性，Bootstrap原生验证会自动处理这些字段的必填逻辑。
• 自定义逻辑针对data-group="required-pair"的输入框，判断是否至少有一个存在有效输入，若都为空则阻止表单提交并显示错误提示。
• 输入过程中实时清除错误状态，优化用户交互体验。

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