JavaScript表单验证：如何处理‘input is not focusable’错误？

问题根源很明确：你把type="file"的输入框用display:none隐藏了，浏览器自带的表单验证机制需要聚焦到未通过验证的输入框，但这个框不可见，就会抛出input is not focusable的错误。直接用下面的方案处理：

步骤1：调整HTML结构 #

先移除文件选择框的required属性，同时修正label的for属性（要和文件选择框的id对应，之前的xxx是错误值），还给文件名输入框加个类方便后续加错误样式：

<div class="conico">
  <input class="form-control fileName-input" readonly id="fileName" placeholder="请选择文件"/>
  <input class="form-control" type="file" style="display:none;" id="fileSelect"/>
  <label for="fileSelect" class="ico">
    <img src="/images/icocamera.svg">
  </label>
</div>

<!-- 假设你的表单结构如下 -->
<form id="uploadForm">
  <!-- 其他表单元素 -->
  <button type="submit">提交</button>
</form>

步骤2：编写自定义验证逻辑 #

用JavaScript接管表单验证，同时保留文件名填充的功能：

// 文件名填充逻辑
const fileSelect = document.getElementById('fileSelect');
const fileNameInput = document.getElementById('fileName');

fileSelect.addEventListener('change', function() {
  if (this.files.length > 0) {
    fileNameInput.value = this.files[0].name;
    // 选完文件后清除错误样式
    fileNameInput.classList.remove('error');
  }
});

// 表单提交验证逻辑
const uploadForm = document.getElementById('uploadForm');

uploadForm.addEventListener('submit', function(e) {
  // 检查是否选择了文件
  if (fileSelect.files.length === 0) {
    // 阻止表单提交
    e.preventDefault();
    // 给文件名输入框加错误样式，提示用户
    fileNameInput.classList.add('error');
    // 弹出提示引导用户
    alert('请先选择要上传的文件');
    // 聚焦到文件名输入框，明确操作目标
    fileNameInput.focus();
  }
});

可选：添加错误提示样式 #

给错误状态的输入框加视觉提示，让用户更直观感知问题：

.fileName-input.error {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

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