Javascript setCustomValidity 不适用于 Chrome 版本 65

Question

如果您想在 chrome 中使用 setCustomValidity 函数设置有效性，则未设置消息。

<input type="text" id="username" required placeholder="Enter Name"
oninput="setCustomValidity('error')"  />

如您所见，如果您在 Firefox 和 Chrome 上运行此jsfiddle ，您可以看到在 chrome 上该字段没有验证消息。

为了看到正在发生的事情去Firefox打开jsfiddle并输入一些东西。 输入内容后，单击外部并观察添加了红色边框并显示文本“错误”。

Chrome有解决方法吗？

编辑：我已经记录了铬的错误。 请随时关注此线程。

Answer 1

对我来说它看起来像一个错误。 我尝试在此处的 JS 小提琴中运行规范中给出的示例。 同样，它适用于 Firefox，但不适用于 Chrome。

 function check(input) { if (input.value == "good" || input.value == "fine" || input.value == "tired") { input.setCustomValidity('"' + input.value + '" is not a feeling.'); } else { // input is fine -- reset the error message input.setCustomValidity(''); } }

 <label>Feeling: <input name=f type="text" oninput="check(this)"></label>

---

一种解决方法可能是在输入上使用pattern属性并提供正则表达式来验证输入。

我将为此使用规范中给出的示例。 您可以在模式属性中设置正则表达式模式，并在标题属性中设置错误消息：

<label>Feeling: <input name=f type="text" pattern="((?!(?:good|fine|tired)).+)" title="Input is not a feeling."></label>

这样，您可以使用伪选择器:invalid将红色边框（或其他任何东西）应用于输入：

input:invalid {
  border-color: red;
}

 input:invalid { border-color: red; }

 <label> Feeling: <input name=f type="text" pattern="((?!(?:good|fine|tired)).+)" title="Input is not a feeling." value="good"> </label>

小提琴： https ://jsfiddle.net/065thz0w/21/

---

注意：这种方法的明显缺点是您不再能够使用 Javascript 进行验证 - 并且您将无法验证字段组合的值。

Answer 2

截至 2022 年 5 月 11 日，谷歌仍未对 OP 提交的错误采取行动。 我已经用相同的内容添加了对该问题的评论，但我想我也会在这里发布。

我已经确定setCustomValidity在我的项目中的窗口load事件后约 1 秒开始工作，尽管时间是完全不可预测的，我似乎无法辨别导致它开始工作的实际情况。

如果其他人像我一样在为此苦苦挣扎后来到这里，我选择实施一种 hack 解决方法，而不是拖出我的应用程序中依赖本机验证的所有代码，以用大型库替换它。

它在相关的原生 Element 类中拦截setCustomValidity 。 当被调用时，它会反复尝试调用本机setCustomValdity直到它工作，直到它尝试了 100 次，或者直到从外部再次调用setCustomValidity拦截器。 随意在您自己的项目中使用它。 它不漂亮，但它有效。

https://gist.github.com/hiebj/177b1fcd8c6be85ac8452b7b8d9f8f1a