HTML5表单提交报不可聚焦无效表单控件问题咨询

问题表现 #

使用HTML5原生表单校验能力时，通过JavaScript实现字段动态切换显隐逻辑后，表单无法提交，控制台抛出错误：

Invalid form control with name="..." is not focusable
报错指向未被选中展示的隐藏字段。

初始问题代码 #

function prodType(value) {
  document
    .querySelectorAll(".fieldbox")
    .forEach((node) => (node.style.display = "none"));
    $("input").prop('required',true);
   
  document.getElementById(map[value]).style.display = "block";
 
}

之前尝试的无效代码 #

function prodType(value) {
  document
    .querySelectorAll(".fieldbox")
    .forEach((node) => (node.style.display = "none"));
    $("input").prop('required',true);
   
  document.getElementById(map[value]).style.display = "block";
  document.getElementById('id here').removeAttribute = "required";
 
}

问题根因 #

• 逻辑顺序错误：先把所有input统一设置为required，仅给单个报错字段移除必填属性，其余隐藏容器内的表单控件仍然携带required属性。浏览器触发原生提交校验时，会识别到这些隐藏的空必填项，但display: none的元素无法被聚焦，直接抛出指定错误。
• 语法错误：removeAttribute是DOM元素的内置方法，不是可赋值的属性，document.getElementById('id here').removeAttribute = "required"这行代码根本没有执行移除required属性的操作，属于无效写法。

正确解决方法 #

核心规则：仅对当前可见的表单控件启用必填校验，所有隐藏状态的控件必须脱离原生校验范围，两种常用实现方案可选：

方案1：动态切换required属性 #

切换显隐时同步调整控件的required状态，代码参考：

function prodType(value) {
  // 先隐藏所有字段块，同时移除块内所有表单控件的必填属性
  document.querySelectorAll(".fieldbox").forEach((node) => {
    node.style.display = "none";
    node.querySelectorAll('input, select, textarea').forEach(control => {
      control.required = false;
    })
  });

  // 展示当前选中的字段块
  const activeFieldBox = document.getElementById(map[value]);
  activeFieldBox.style.display = "block";

  // 仅给当前可见块内需要校验的控件添加必填规则
  activeFieldBox.querySelectorAll('input, select, textarea').forEach(control => {
    // 可根据业务需求筛选需要必填的控件，比如加自定义标记类判断
    control.required = true;
  })
}

方案2：给隐藏控件加disabled属性 #

带disabled属性的表单控件会被HTML5原生校验自动忽略，也不会随表单提交，逻辑更简单：

function prodType(value) {
  // 隐藏所有字段块，同时禁用块内所有控件，自动跳过校验
  document.querySelectorAll(".fieldbox").forEach((node) => {
    node.style.display = "none";
    node.querySelectorAll('input, select, textarea').forEach(control => {
      control.disabled = true;
    })
  });

  // 展示当前选中的字段块，启用块内控件
  const activeFieldBox = document.getElementById(map[value]);
  activeFieldBox.style.display = "block";
  activeFieldBox.querySelectorAll('input, select, textarea').forEach(control => {
    control.disabled = false;
    // 需要必填的控件正常加required属性即可
    control.required = true;
  })
}

内容的提问来源于stack exchange，提问作者k201093 Syed Muhammad Misbah A