为什么 HTML 验证在 Electron 中不起作用？答案

【问题标题】：Why is HTML validation not working in Electron?为什么 HTML 验证在 Electron 中不起作用？
【发布时间】：2021-10-25 12:30:27
【问题描述】：

我已经搜索了一段时间。我有一个 Electron（版本 13.2.2，Node v14.17.3，Chrome 92）应用程序，我想以我拥有的一种简单形式添加一些验证。下面的代码是在窗口中加载的 HTML 文件的一部分。结果通过 IPC 通信传递，其他与 Electron 相关的工作正常。控制台日志根本不显示任何未定义或任何其他问题。例如，当我直接在 Chrome 中打开 HTML 文件时，我得到了所需的名称，正如所宣传的那样，正则表达式模式也被应用于年份字段中的输入。但是在我的 Electron 窗口中，我仍然可以在不触发任何验证的情况下保存对象。在 GitHub 上搜索我发现了一个有点相似的问题（尽管我没有遇到任何其他问题，这是一个工作应用程序），但它提到它已被关闭并修复（https://github.com/electron/electron/issues/1043）。为了使 required 和 pattern 验证正常工作，我缺少什么？

这是 HTML 表单：

    <section>
      <form action="#" method="POST" id="add-new-pattern-form">
        <label for="pattern-name">Name:</label>
        <input id="pattern-name" type="text" name="pattern-name" required />
        <p></p>
        <div id="cover-image"></div>
        <p></p>
        <button type="button" id="open-cover-image">Add Cover Image</button>
        <p></p>
        <label for="company-name">Company:</label>
        <input id="company-name" type="text" name="company-name" />
        <p></p>
        <label for="year">Year:</label>
        <input id="year" type="text" name="year" pattern="^\d{4}$" />
        <p></p>
        <label for="notes">Notes:</label>
        <textarea id="notes" name="notes" style="resize: true"></textarea>
        <p></p>
        <div id="additional-images"></div>
        <p></p>
        <button type="button" id="add-images">Add Images</button>
        <p></p>
        <input
          id="submit-new-pattern-button"
          type="submit"
          value="Save Pattern"
        />
      </form>
    </section>

这是渲染器中的用法：

submitNewPatternButton.addEventListener("click", () => {
  console.log("addnewrenderer - click submit new pattern button");
  let pattern = createPatternObjectFromInputs();
  ipcRenderer.send("submit-new-pattern-button-clicked", pattern);
});

另一个相关的数据是主进程中的窗口设置：

const createNewWindow = (fileLocation, id) => {
  let x, y;
  const currentWindow = BrowserWindow.getFocusedWindow();

  // When we already have a window we open a new one to the right and down of the current one
  if (currentWindow) {
    const [currentWindowX, currentWindowY] = currentWindow.getPosition();
    x = currentWindowX + 20;
    y = currentWindowY + 20;
  }

  let newWindow = new BrowserWindow({
    x,
    y,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
    show: false,
  });

  newWindow.loadFile(fileLocation);

  newWindow.once("ready-to-show", () => {
    newWindow.show();
  });

  // Necessary otherwise the HTML default title is always used
  newWindow.on("page-title-updated", (event) => {
    event.preventDefault();
  });

  newWindow.on("close", () => {
    windows.delete(id);
    newWindow = null;
  });

  windows.set(id, newWindow);
  console.log("main - finished new window creation for id: " + id);

  return newWindow;
};

我要补充的最后一点是，在重构代码以使用 preload.js 并设置 contextIsolation: true 和 nodeIntegration: false（Electron 12 之后的默认值和安全最佳实践）时，我注意到当我有一个验证工作的页面出现错误。

例如，假设我在渲染器中引入了故意错误，例如：

const x;
x.doSomething;

在这种情况下，验证工作！显然，没有其他事情可以做:)

【问题讨论】：

值得指定您测试的 Electron 和 Chrome 的版本号。（但您链接的问题说提交不起作用，而在您的情况下它确实有效？）控制台日志中是否出现任何提供线索的内容？
您在处理表单时是否使用event.preventDefault();？它使浏览器忽略required 属性。查看一些 JavaScript 代码会很有帮助，因为您的 HTML 标记看起来是有效的，并且不应该仅仅因为它在 Electron 窗口中提供而表现不同。
@Looky1173 在page-title-updated 事件之后，我确实使用event.preventDefault() 设置新窗口的标题。我尝试删除它，但似乎没有帮助。
@JoãoMartinho 尝试由表单触发的listening for the submit event。根据 MDN 文档，这不应忽略表单验证。
@Looky1173 成功了！我现在正在收听在addNewPatternForm.addEventListener("submit", () => { //do my thing }); 表单上发生的整个提交事件，而不是收听按钮。我仍然不确定为什么会发生这种情况，但如果你想创建一个答案，我会标记它。

标签： javascript html node.js electron

【解决方案1】：

请注意，submit 事件会在元素本身上触发，而不是在其中的任何 <button> 或 <input type="submit"> 上触发。但是，发送来指示表单的提交操作已被触发的SubmitEvent 包含一个submitter 属性，它是被调用以触发提交请求的按钮。

MDN Docs

表单验证与submit 事件相关联，该事件在表单元素上触发，因此在提交按钮上监听点击事件不会触发它。

请尝试监听表单触发的submit 事件，如下所示：

const formElement = document.getElementById('myForm');
formElement.addEventListener('submit', () => {
    // Handle form submission
});

【讨论】：