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