表单提交异常：display为none/block的Div输入域提交失败问题咨询

问题描述 #

我有两个分别设置了display:none和display:block的Div，每个Div内都包含表单输入字段。当我在其中一个Div的输入域中填写数据，另一个Div处于display:none状态时，表单无法提交。但如果将隐藏的Div注释掉，处于display:block的Div对应的表单就能正常提交；取消注释恢复display:none后，原本显示的Div对应的表单又无法提交了，请问该如何解决？

问题分析 #

核心问题是浏览器的表单验证机制：即使元素被设置为display:none，只要它带有required属性，浏览器依然会对其进行非空验证。你的JS代码虽然尝试在切换显示状态时修改字段的required属性，但存在两个关键问题：

1. 页面初始化时未执行状态设置，默认两个Div的所有required字段均生效，导致一开始就有隐藏的必填字段未填写，直接阻止表单提交；
2. 代码存在冗余逻辑（两个独立的切换函数），且Employee Div内有一个input标签重复定义了name属性（name="company_id"和name="quantity"），会导致表单数据异常。

解决方案 #

1. 合并并优化状态切换逻辑 #

将两个独立的切换函数合并为一个，减少冗余代码，同时在页面加载完成后立即初始化正确的字段必填状态。

2. 修复表单字段错误 #

移除Employee Div中input标签重复的name属性，避免表单数据冲突。

3. 精准控制必填字段状态 #

通过JS动态控制字段的required属性：隐藏Div时将其内所有必填字段的required设为false，显示时设为true。

修改后的完整代码 #

<div class="form-group">
  <label for="role">Role:</label>
  <select onchange="toggleFormSections(this)" id="role" name="role" class="form-control  <?php echo (!empty($role_err)) ? 'is-invalid' : ''; ?>">
    <option value="company" selected="true">Company</option>
    <option value="employee">Employee</option>
  </select>
  <span class="invalid-feedback"><?php echo $role_err; ?></span>
</div>

<!-- company Div -->
<div id="hidden_div1">
  <label>COMPANY NAME: </label>
  <input type="text" name="name" class="form-control" required> <br>

  <div class="form-group">
    <label>Login Email</label>
    <input type="email" name="email" class="form-control <?php echo (!empty($username_err)) ? 'is-invalid' : ''; ?>" required>
    <span class="invalid-feedback"><?php echo $username_err; ?></span>
  </div>

  <label> PHONE: </label>
  <input type="text" name="phone" class="form-control" required> <br>

  <label> LOGO: </label>
  <input type="file" name="logo" class="form-control-file" required> <br>

  <label> Website: </label>
  <input type="text" name="website" class="form-control" required> <br>
  
  <div class="form-group">
    <label>Password</label>
    <input type="password" name="password" class="form-control <?php echo (!empty($password_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $password; ?>" required>
    <span class="invalid-feedback"><?php echo $password_err; ?></span>
  </div>

  <div class="form-group">
    <label>Confirm Password</label>
    <input type="password" name="confirm_password" class="form-control <?php echo (!empty($confirm_password_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $confirm_password; ?>" required>
    <span class="invalid-feedback"><?php echo $confirm_password_err; ?></span>
  </div>
</div>

<!-- Employee Div -->
<div class="form-group" id="hidden_div">
  <label for="role1">Coordinator:</label>
  <select id="role1" name="role1" class="form-control  <?php echo (!empty($role_err)) ? 'is-invalid' : ''; ?>">
    <option value="cr1">CR1</option>
    <option value="cr2">CR2</option>
    <option value="cr3">CR3</option>
  </select>
  <span class="invalid-feedback"><?php echo $role_err; ?></span>
  
  <label>First Name: </label>
  <input type="text" name="first_name" class="form-control" required> <br>

  <label>Last Name: </label>
  <input type="text" name="last_name" class="form-control" required> <br>

  <label> Company Id: </label>
  <!-- 移除重复的name="quantity"属性 -->
  <input type="number" name="company_id" min="1" value="<?php echo $company_id; ?>" class="form-control-file" required> <br>

  <label> EMAIL: </label>
  <input type="email" name="email1" value="" class="form-control" required> <br>

  <label> PHONE: </label>
  <input type="text" name="phone1" class="form-control" required> <br>
  
  <div class="form-group">
    <label>Password</label>
    <input type="password" name="password" class="form-control <?php echo (!empty($password_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $password; ?>" required>
    <span class="invalid-feedback"><?php echo $password_err; ?></span>
  </div>
  
  <div class="form-group">
    <label>Confirm Password</label>
    <input type="password" name="confirm_password" class="form-control <?php echo (!empty($confirm_password_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $confirm_password; ?>" required>
    <span class="invalid-feedback"><?php echo $confirm_password_err; ?></span>
  </div>
</div>

<button class="btn btn-success" type="submit" name="submit"> Submit </button><br>
<a class="btn btn-info" href="welcome.php"> Cancel </a><br>

</div>
</form>
</div>
</div>
</div>
</div>
</div>

<H3 class="text-center">Companies Information</H3>

<script>
// 页面加载完成后初始化表单状态
document.addEventListener('DOMContentLoaded', function() {
  const roleSelect = document.getElementById('role');
  toggleFormSections(roleSelect);
});

function toggleFormSections(element) {
  const isCompany = element.value === 'company';
  const companyDiv = document.getElementById('hidden_div1');
  const employeeDiv = document.getElementById('hidden_div');

  // 控制显示状态
  companyDiv.style.display = isCompany ? 'block' : 'none';
  employeeDiv.style.display = !isCompany ? 'block' : 'none';

  // 控制必填字段状态
  setFieldsRequired(companyDiv, isCompany);
  setFieldsRequired(employeeDiv, !isCompany);
}

function setFieldsRequired(div, isRequired) {
  const requiredFields = div.querySelectorAll('[required]');
  requiredFields.forEach(field => {
    field.required = isRequired;
    // 可选：移除浏览器默认的验证提示样式（如果需要）
    if (!isRequired) {
      field.classList.remove('is-invalid');
    }
  });
}
</script>

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