javascript - 为什么在输入(Chrome 65)上忽略setCustomValidity ('')

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

HTML5: Why does my “oninvalid” attribute let the pattern fail?

HTML5 form required attribute. Set custom validation message?

How can I change or remove HTML5 form validation default error messages?

概述

给定一个字段，该字段:

设置了pattern属性用于验证，例如，对于4字符十六进制字符串输入的"[a-f,0-9]{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.消息根本不会出现。

最佳答案

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

在setCustomValidity('')中使用oninput应该禁用输入上显示的默认验证消息。

以下变通办法适用于我:

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

关于javascript - 为什么在输入(Chrome 65)上忽略setCustomValidity ('')，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49723782/