表单required属性失效问题：提交时提示“表单未连接”

问题原因 #

控制台的警告“Form submission canceled because the form is not connected”已经点明核心：你通过innerHTML生成的表单没有被正确挂载到当前页面的DOM树中。浏览器只会对已加入文档DOM结构的表单触发原生required校验，未连接到DOM的表单无法触发校验逻辑，提交操作也会被直接取消。

解决方法 #

1. 确保表单插入到DOM中 #

生成表单HTML后，必须将它添加到页面的某个DOM容器里，比如页面的body或指定的div：

// 假设页面存在一个存放表单的容器
const formContainer = document.getElementById('form-container');
// 生成表单HTML字符串
const formHTML = `
<form id="task-form">
  <label for="task-title">Title:</label>
  <input type="text" id="task-title" name="task-title" required>
  <label for="task-date">Due date:</label>
  <input type="date" id="task-date" name="task-date" required>
  <label for="task-description">Description:</label>
  <textarea name="task-description" id="task-description" required></textarea>
  <label for="checkbox">Add to a project?</label>
  <input type="checkbox" name="checkbox" id="checkbox">
  <label for="task-priority">Priority:</label>
  <select name="task-priority" id="task-priority" required>
    <option value="Low">Low</option>
    <option value="Medium">Medium</option>
    <option value="High">High</option>
  </select>
  <button type="submit" id="create-task-btn">Create Task</button>
</form>
`;
// 将表单插入到DOM容器中
formContainer.innerHTML = formHTML;

2. 正确绑定表单提交事件 #

如果需要自定义提交逻辑，推荐用事件委托（适配动态生成的元素），或者在表单插入DOM后再绑定事件：

// 事件委托方式，监听document上的submit事件
document.addEventListener('submit', function(e) {
  if (e.target.id === 'task-form') {
    e.preventDefault(); // 阻止默认提交行为
    // 这里编写你的表单处理逻辑
    console.log('表单提交触发');
  }
});

3. 手动触发校验（可选） #

如果挂载DOM后仍存在校验异常，可以手动调用表单的校验方法，强制触发原生提示：

document.addEventListener('submit', function(e) {
  const form = e.target;
  if (form.id === 'task-form') {
    e.preventDefault();
    // 手动校验表单
    if (!form.checkValidity()) {
      // 显示原生校验提示
      form.reportValidity();
      return;
    }
    // 校验通过后的业务逻辑
    console.log('表单校验通过，开始处理数据');
  }
});

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