HTML5验证display:none的必填输入字段导致表单无法提交

这个问题我碰到好多次了——HTML5的原生表单验证可不管字段显不显示，只要标了required就会查到底，确实挺烦人的。给你几个靠谱的解决办法，按需选：

• 动态切换required属性（最推荐）
  既然字段是通过下拉框选择来显示/隐藏的，那就在控制显示的show()函数里，同步修改对应字段的必填属性。比如当某个选项被选中、需要显示隐藏字段时，给它加上required；切换到其他选项时，把required去掉就行。

  举个具体的代码例子，假设你的隐藏字段有个id是conditionalField：

  function show(selectedValue) {
    const targetField = document.getElementById('conditionalField');
    if (selectedValue === '对应显示字段的选项值') {
      targetField.style.display = 'block';
      targetField.setAttribute('required', ''); // 开启必填验证
    } else {
      targetField.style.display = 'none';
      targetField.removeAttribute('required'); // 关闭必填验证
    }
  }
  

  如果有多个条件字段，建议给它们加个统一的类（比如conditional-required），这样可以批量处理，不用一个个写id。

• 自定义表单验证逻辑
  要是你需要更灵活的验证规则，比如有些场景下即使字段显示也不用验证，可以给表单加上novalidate属性关闭原生验证，然后自己写JS控制验证流程：

  先修改表单标签：

  <form class="form" name="my_form" id="my_form" novalidate>
    <!-- 原表单内容 -->
  </form>
  

  然后添加提交事件的验证逻辑：

  document.getElementById('my_form').addEventListener('submit', function(e) {
    e.preventDefault(); // 先阻止默认提交
    let isFormValid = true;
  
    // 只验证可见的必填字段
    this.querySelectorAll('[required]:not([style*="display:none"])').forEach(field => {
      if (!field.checkValidity()) {
        isFormValid = false;
        field.reportValidity(); // 弹出原生的错误提示
        // 也可以在这里自定义错误样式或提示文本
      }
    });
  
    // 验证通过再提交表单
    if (isFormValid) {
      this.submit();
    }
  });
  

  这个方法适合复杂的表单场景，能完全掌控哪些字段需要被验证。

• 小技巧：用disabled属性配合
  除了移除required，还可以给隐藏字段加上disabled属性——因为HTML5验证会忽略禁用的字段。不过要注意，禁用的字段不会被提交到服务器，所以如果这个字段的值需要被提交的话，记得在显示字段时把disabled也去掉。

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