为什么在输入时忽略 setCustomValidity('') (Chrome 65)

Question

注意：据我所知，这个问题不是以下问题的重复问题：

• HTML5：为什么我的“oninvalid”属性让模式失败？
• HTML5 表单必需属性。设置自定义验证消息？
• 如何更改或删除 HTML5 表单验证默认错误消息？

---

概述

给定一个字段：

• 具有pattern用于验证的属性集，例如"[a-f,0-9]{4}"用于一个4个字符的十六进制字符串输入。
• 已oninvalid设置setCustomValidity('...some message...')为定义自定义验证消息
• 已oninput设置setCustomValidity('')为在输入时重置

这是一个示例：

/* jshint esnext: true */
const form   = document.querySelector("#form");
const field  = document.querySelector("#field");
const output = document.querySelector("#output");

form.addEventListener('submit', (e) => {
  console.log("SUBMIT");
  output.textContent = field.value;
  e.preventDefault(); // Prevent default POST request
});

field.oninvalid = (event) => {
  console.log("INVALID");
  event.target.setCustomValidity('must be valid 4 hex characters');
}

field.oninput = (event) => {
  console.log("INPUT");
  event.target.setCustomValidity('');
}

Output: <span id="output">No output</span>
<form id="form">
  <label for="field">Enter 4 character hex code: </label>
  <input id="field" type="text" pattern="[a-f,0-9]{4}" autocomplete=off>
</form>

验证几乎按预期工作，除非当用户输入无效条目然后继续尝试编辑它时，他们的以下输入状态仍然无效：

此时，既没有使用 中定义的自定义setCustomValidity消息oninvalid，也没有使用 中定义的空消息onInput。

相反，只要该字段处于无效状态且未模糊，Please match the requested format.就会出现默认消息。

---

题

这里发生了什么？查看控制台，oninput事件每次都会被调用，因此event.target.setCustomValidity('');每次都会被调用。

那么为什么我们仍然看到通用的默认验证消息？不应该setCustomValidity('')禁用吗？

此处可接受的答案应显示以下内容：

• 该parameter字段被尊重以进行验证。
• 当且仅当用户尝试提交无效字段时才会出现任何验证消息，而不是在他们之后立即修改输入时。
• 默认Please match the requested format.消息根本不会出现。

Answer 1

看来这是 Windows 中 Chrome 65 的一个错误。

使用setCustomValidity('')inoninput应该禁用输入中出现的默认验证消息。

以下解决方法对我有用：

/* jshint esnext: true */
const form   = document.querySelector("#form");
const field  = document.querySelector("#field");
const output = document.querySelector("#output");

const pattern = field.getAttribute("pattern");

form.addEventListener('submit', (e) => {
  console.log("SUBMIT");
  output.textContent = `User submitted: ${field.value}`;
  e.preventDefault(); // Prevent default POST request
});

field.oninvalid = (event) => {
  console.log("INVALID");
  event.target.setCustomValidity('must be valid 4 hex characters');
}

field.oninput = (event) => {
  console.log("INPUT");
  event.target.setCustomValidity('');
  event.target.removeAttribute("pattern");
}

field.onchange = (event) => {
  console.log("CHANGE");
  event.target.setAttribute("pattern", pattern);
}

  Output: <span id="output">No output</span>
  <form id="form">
    <label for="field">Enter 4 character hex code: </label>
    <input id="field" type="text" pattern="[a-f,0-9]{4}" autocomplete=off>
  </form>