Electron 13中HTML表单required、pattern原生验证不生效如何解决？

HTML原生表单验证的触发时机是form元素的submit事件派发前，你绑定的是提交按钮的click事件，点击按钮时该事件会优先执行，无论表单验证是否通过，你写的IPC提交逻辑都会直接运行，完全绕过了原生验证流程。

你刻意制造JS错误时验证能正常触发，是因为JS运行异常打断了你绑定的click回调执行，浏览器原生的表单提交流程没有被自定义逻辑干扰，所以验证规则正常生效。

修改渲染层的事件绑定逻辑，将监听对象从提交按钮替换为表单元素即可：

// 获取表单DOM
const patternForm = document.getElementById('add-new-pattern-form');
// 监听表单submit事件而非按钮click事件
patternForm.addEventListener('submit', (event) => {
  // 阻止表单默认提交行为，避免页面刷新
  event.preventDefault();
  // 验证通过后才会执行到此处
  console.log("addnewrenderer - submit new pattern form");
  const pattern = createPatternObjectFromInputs();
  ipcRenderer.send("submit-new-pattern-button-clicked", pattern);
});

如果需要手动控制验证流程，也可以调用表单原生方法自行判断：

patternForm.addEventListener('submit', (event) => {
  event.preventDefault();
  // 手动触发验证，获取验证结果
  const isValid = patternForm.checkValidity();
  if (!isValid) {
    // 可在此处添加自定义错误提示逻辑
    return;
  }
  const pattern = createPatternObjectFromInputs();
  ipcRenderer.send("submit-new-pattern-button-clicked", pattern);
});

该问题和Electron主进程配置无关，无需调整窗口参数。

内容的提问来源于stack exchange，提问作者João Martinho