切换表单时出现「无效表单控件不可聚焦」报错该如何解决

安全阿岳

2026-9-28

问题根因

这个报错由浏览器默认表单校验逻辑触发，核心原因如下：

放置在form标签内的<button>未指定type属性时，默认类型为submit，点击时会自动触发表单提交校验流程
你当前的代码逻辑先修改了表单的display属性，将当前表单设为display: none，浏览器在校验表单输入项时，需要将校验不通过的输入项聚焦提示，但此时输入项已经不在渲染树中，无法被聚焦，因此抛出该错误。

修复方案

方案1：明确按钮类型（最推荐）

给两个切换按钮添加type="button"属性，明确按钮为普通交互按钮，不会触发表单提交校验，修改后HTML代码如下：

<form action="#" method="post" class="signINUPForm signUPForm">
  <input type="text" name="firstName" id="firstName">
  <label for="firstName">First Name</label>

  <button type="button" class="formChange">Change to Form 2</button>
</form>
<form action="#" method="post" class="signINUPForm signINForm">
  <input type="text" name="lastName" id="lastName" placeholder=" ">
  <label for="lastName">Last Name</label>

  <button type="button" class="formChange">Change to Form 1</button>
</form>

方案2：调整阻止默认行为的执行顺序

将JS函数里的e.preventDefault()移到逻辑最开头，先阻止默认的表单提交行为，再执行表单切换逻辑，修改后JS代码如下：

function toggleSignINUPForms(e) {
  e.preventDefault() // 优先执行阻止默认行为
  signUPForm.style.display = createAccSignVar ? "none" : "block";
  signINForm.style.display = createAccSignVar ? "block" : "none";
  createAccSignVar = !createAccSignVar;
}