含动态div的表单必填字段设置问题咨询

你的方案完全可行，不需要拆分成两个独立表单。提交无反应的核心原因是：隐藏的表单字段即使display:none，浏览器仍会校验其required属性，空值状态会阻止表单提交。同时你的代码里还有几处基础错误需要修正，以下是具体解决步骤：

第一步：修复代码基础错误 #

先修正原代码里的语法和逻辑错误：

1. 修正下拉框的事件绑定与属性：
   原代码中onchange调用的函数名和实际函数名不匹配，required属性位置错误，且option的value引号未闭合、缺少文本，修改后：

   <select id="gender" title="Gender" required onchange="checkChargingProduct()">
       <option value="">请选择性别</option>
       <option value="Male">男</option>
       <option value="Female">女</option>
   </select>
   

2. 修正JS中DOM元素的ID获取：
   原代码里document.getElementById("femaleFields ")多了一个空格，改为document.getElementById("femaleFields")
3. 确保函数名和调用一致：统一使用checkChargingProduct作为函数名（原代码中select调用的是checkGender()，但函数定义是checkChargingProduct）

第二步：动态控制字段的校验状态 #

解决隐藏字段校验问题有两种简洁的实现方式：

方式一：动态切换required属性 #

在切换性别时，给当前显示的字段添加required，隐藏的字段移除required：

function checkChargingProduct(){
  const selectedGender = document.getElementById("gender").value;
  const maleFields = document.getElementById("maleFields");
  const femaleFields = document.getElementById("femaleFields");

  // 处理男性字段显示场景
  if(selectedGender === "Male"){
    femaleFields.style.display = "none";
    maleFields.style.display = "block";
    // 给男性字段添加必填，移除女性字段必填
    maleFields.querySelectorAll("input, select, textarea").forEach(field => field.required = true);
    femaleFields.querySelectorAll("input, select, textarea").forEach(field => field.required = false);
  } 
  // 处理女性字段显示场景
  else if(selectedGender === "Female"){
    femaleFields.style.display = "block";
    maleFields.style.display = "none";
    // 给女性字段添加必填，移除男性字段必填
    femaleFields.querySelectorAll("input, select, textarea").forEach(field => field.required = true);
    maleFields.querySelectorAll("input, select, textarea").forEach(field => field.required = false);
  }
  // 未选择性别时隐藏所有动态字段，移除必填
  else {
    femaleFields.style.display = "none";
    maleFields.style.display = "none";
    maleFields.querySelectorAll("input, select, textarea").forEach(field => field.required = false);
    femaleFields.querySelectorAll("input, select, textarea").forEach(field => field.required = false);
  }
}

方式二：使用disabled属性（更推荐） #

被disabled的表单元素不会被浏览器校验，也不会随表单提交，逻辑更简单：

function checkChargingProduct(){
  const selectedGender = document.getElementById("gender").value;
  const maleFields = document.getElementById("maleFields");
  const femaleFields = document.getElementById("femaleFields");

  if(selectedGender === "Male"){
    femaleFields.style.display = "none";
    maleFields.style.display = "block";
    // 禁用女性字段，启用男性字段
    femaleFields.querySelectorAll("input, select, textarea").forEach(field => field.disabled = true);
    maleFields.querySelectorAll("input, select, textarea").forEach(field => field.disabled = false);
  } 
  else if(selectedGender === "Female"){
    femaleFields.style.display = "block";
    maleFields.style.display = "none";
    // 禁用男性字段，启用女性字段
    maleFields.querySelectorAll("input, select, textarea").forEach(field => field.disabled = true);
    femaleFields.querySelectorAll("input, select, textarea").forEach(field => field.disabled = false);
  }
  else {
    femaleFields.style.display = "none";
    maleFields.style.display = "none";
    maleFields.querySelectorAll("input, select, textarea").forEach(field => field.disabled = true);
    femaleFields.querySelectorAll("input, select, textarea").forEach(field => field.disabled = true);
  }
}

注意：初始状态下，男女字段内的元素要加上disabled属性，避免页面加载时触发不必要的校验：

<div id="femaleFields" style="display:none;">
    <input type="text" name="femaleInfo" required disabled>
    <!-- 其他女性字段 -->
</div>
<div id="maleFields" style="display:none;">
    <input type="text" name="maleInfo" required disabled>
    <!-- 其他男性字段 -->
</div>

第三步：初始化状态 #

页面加载完成后调用一次函数，确保初始显示状态正确：

window.onload = () => checkChargingProduct();

结论 #

无需拆分表单，在同一个表单内动态控制字段的校验/禁用状态是更简洁的方案，拆分表单反而会增加性别切换后的表单逻辑复杂度。按上述步骤修正后，表单即可正常提交并完成对应字段的必填校验。

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