HTML表单二选一验证问题：选A下拉框或填完B所有字段

需求说明 #

表单需实现二选一必填规则：要么选择Option A对应的下拉框选项，要么填写完Option B对应的全部输入字段，满足其一即可提交。已完成单选按钮切换显示对应区域的功能，需补充验证逻辑。

实现步骤 #

1. 给表单添加提交事件监听，阻止默认提交行为，自定义验证逻辑
2. 根据选中的单选按钮，分别验证对应区域：
   • 若选中Option A：检查下拉框是否选择了非空选项
   • 若选中Option B：检查B1、B2、B3三个输入框是否都填写了符合min/max要求的数值
3. 验证通过后再手动提交表单，验证不通过则给出提示

修改后的完整代码 #

HTML #

<form action="results.html" method="GET" id="formular">
  <h1>Fill out A or B</h1>
  <div>
    <div class="float_Left">
      <label for="option_A">Option A</label>
      <input type="radio" name="A_or_B" id="option_A" value="option_A" checked>
    </div>
    <div class="float_Right">
      <label for="option_B">Option B</label>
      <input type="radio" name="A_or_B" id="option_B" value="option_B">
    </div>
  </div>

  <br>
  <br>

  <div class="float_Left" id="select_A">
    <label for="select">Select:</label>
    <select name="select" id="select">
      <option value="">select</option>
      <option value="A1">A1</option>
      <option value="A2">A2</option>
      <option value="A3">A3</option>
    </select>
  </div>

  <div class="float_Right" id="fill_B">
    <div>
      <label for="B1">B1:</label>
      <input type="number" name="B1" id="B1" value="" min="10" max="100" placeholder="mm">
    </div>
    <div>
      <label for="B2">B2:</label>
      <input type="number" name="B2" id="B2" value="" min="10" max="100" placeholder="mm">
    </div>
    <div>
      <label for="B3">B3:</label>
      <input type="number" name="B3" id="B3" value="" min="10" max="100" placeholder="mm">
    </div>
  </div>

  <br>
  <br>
  <br>
  <br>
  <br>
  <br>

  <div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </div>
</form>

CSS #

.float_Left {
  float: left;
}

.float_Right {
  float: right;
}

JavaScript #

// SHOW / HIDE A or B
window.onload = function() {
  document.getElementById('fill_B').style.display = 'none';
};

const option_B = document.getElementById('option_B');
const option_A = document.getElementById('option_A');
const select_A = document.getElementById('select_A');
const fill_B = document.getElementById('fill_B');
const form = document.getElementById('formular');

// 切换显示Option A区域
option_A.addEventListener('click', () => {
  select_A.style.display = 'block';
  fill_B.style.display = 'none';
});

// 切换显示Option B区域
option_B.addEventListener('click', () => {
  fill_B.style.display = 'block';
  select_A.style.display = 'none';
});

// 表单提交验证逻辑
form.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认提交
  let isValid = true;

  // 获取选中的单选按钮
  const selectedOption = document.querySelector('input[name="A_or_B"]:checked').value;

  if (selectedOption === 'option_A') {
    // 验证Option A的下拉框
    const selectValue = document.getElementById('select').value;
    if (!selectValue) {
      alert('请选择Option A的选项');
      isValid = false;
    }
  } else if (selectedOption === 'option_B') {
    // 验证Option B的三个输入框
    const b1 = document.getElementById('B1');
    const b2 = document.getElementById('B2');
    const b3 = document.getElementById('B3');
    
    const b1Value = parseInt(b1.value);
    const b2Value = parseInt(b2.value);
    const b3Value = parseInt(b3.value);

    // 检查是否为空，且符合数值范围
    if (isNaN(b1Value) || b1Value < 10 || b1Value > 100) {
      alert('B1必须填写10-100之间的数值');
      isValid = false;
    } else if (isNaN(b2Value) || b2Value < 10 || b2Value > 100) {
      alert('B2必须填写10-100之间的数值');
      isValid = false;
    } else if (isNaN(b3Value) || b3Value < 10 || b3Value > 100) {
      alert('B3必须填写10-100之间的数值');
      isValid = false;
    }
  }

  // 验证通过则提交表单
  if (isValid) {
    form.submit();
  }
});

说明 #

• 优化了原有的显示切换逻辑，简化冗余代码
• 提交时根据选中的选项针对性验证，确保满足二选一必填要求
• 验证不通过时弹出提示，引导用户修正输入内容

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