我在pattern驗證規則的輸入上實作了自定義驗證訊息，同時保留默認訊息required。但是，當我這樣做時，一旦輸入變為無效，即使我符合pattern標準，它也永遠不會再次變為有效。
document.addEventListener("DOMContentLoaded", function () {
const txtUsername = document.getElementById("UserName");
txtUsername.oninvalid = function (e)
{
const input = e.target;
if (input.validity.patternMismatch)
{
input.setCustomValidity("Usernames cannot contain the @ symbol");
}
}
})<form onsubmit="event.preventDefault(); alert('Form submitted');" action="post">
<!--pattern regex prohibits use of the @ symbol-->
<input id="UserName" type="text" pattern="^((?!@).)*$" required />
<button type="submit">Submit</button>
</form>
uj5u.com熱心網友回復：
首先，根據MDN：
如果沒有錯誤，將訊息設定為空字串至關重要。只要錯誤資訊不為空，表單就不會通過驗證，不會被提交。
這與HTML 標準所說的一致：
遭受自定義錯誤
當控制元件的自定義有效性錯誤訊息（由元素的方法或方法設定）
setCustomValidity()不是空字串時。ElementInternalssetValidity()如果一個元素沒有遭受上述任何有效性狀態，則它滿足其約束。
如果確定表單域有效，您的示例不會清除自定義錯誤。因此，一旦該欄位被確定為無效，它將在會話的剩余時間內保持不變。
此外，只有在欄位已被確定為無效后，您才修改自定義錯誤。這意味著即使您在同一處理程式中清除訊息，仍不會提交表單。
實作目標的更好方法是在該欄位的change事件處理程式中監視該欄位并在那里設定自定義訊息：
document.getElementById('UserName').addEventListener('change', function (ev) {
const input = ev.target;
if (input.validity.patternMismatch) {
input.setCustomValidity("Usernames cannot contain the @ symbol");
} else {
input.setCustomValidity("");
}
}, false);<form onsubmit="event.preventDefault(); alert('Form submitted');" action="post">
<!--pattern regex prohibits use of the @ symbol-->
<input id="UserName" type="text" pattern="^((?!@).)*$" required />
<button type="submit">Submit</button>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/409962.html
標籤：