为什么在输入（Chrome65）时忽略setCustomValality（"）

Question

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

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

给定一个字段：

• 为验证设置了模式属性，例如对于4个字符的十六进制字符串输入设置了“[a-f，0-9]{4}”

下面是一个示例，说明了这一点：

/* 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>

验证工作几乎与预期一样，除非用户输入无效条目，然后继续尝试并编辑它，其以下输入状态仍然无效：

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

相反，只要字段处于无效状态且不模糊，默认的请与请求的格式匹配 消息出现。

这到底是怎么回事？在控制台中，每次都调用onininin事件，因此每次都调用event.target.setCustomValality('');。

那么，为什么我们仍然看到通用的默认验证消息呢？不应该setCustomValidity（“”）禁用它吗？

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

• 参数字段用于验证。
• 当且仅当用户试图提交无效字段时，而不是当他们随后立即修改输入时，任何验证消息都会出现。
• 默认的请匹配请求的格式。消息永远不会出现。




Answer 1

当多个输入组合无效时，将使用setCustomValality。这就是为什么它必须在之后手动重置为空字符串。其他方面，应该使用title属性。

编辑输入后试图隐藏验证错误是可以理解的，但这违背了HTML5的形式哲学。只要输入无效，就应该显示它。

添加maxlong可以帮助用户不越过上限。

如果您真的希望您的要点得到满足，请不要使用HTML5表单验证，而是使用自定义的东西。

因此，即使setCustomValidity设置为空字符串，也会显示工具提示的原因是，根据模式属性，输入元素仍然无效。

<form id="form">
  <label for="field">Enter 4 character hex code: </label>
  <input id="field" type="text" pattern="[a-f,0-9]{4}" maxlength="4" minlength="4" autocomplete="off" title="must be valid 4 hex characters">
</form>

JS

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");
}

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

Answer 2

这似乎是windows中Chrome 65的一个bug。

使用setCustomValality（"）中的onindin应该禁用输入上出现的默认验证消息。

以下变通方法适用于我：

/* 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>