为什么一个被禁用的元素正在被验证?

Question

我正在为我的HTML表单创建一个自定义验证，以将maxlength属性行为从阻止超过限制的输入更改为非阻止，因此允许用户输入比指定限制更多的字符，但会看到一个错误。但是，我在使用禁用字段时遇到了麻烦。

我在说明书(来源)中读到:

如果一个元素被禁用，它将被禁止进行约束验证。

对于具有required属性的输入似乎成立，因为当字段为disabled且没有值时，validity.valueMissing为false。但当字段设置了maxlength属性时，当字段设置为disabled且值大于maxlength时，validity.tooLong为true。

在下面的示例中，当我在输入字段中输入超过10个字符时，单击"禁用切换";按钮禁用该字段，然后单击"报告有效性"。按钮，当我期望它不显示时显示错误(在Chrome和Firefox上勾选)。

const input = document.getElementById("input");
const errMsg = document.getElementById("err-msg");
const btnToggle = document.getElementById("btn-toggle");
const btnReport = document.getElementById("btn-report");
btnToggle.addEventListener("click", () => {
input.disabled = !input.disabled;
});
btnReport.addEventListener("click", () => {
input.maxLength = "10";
if(input.validity.tooLong) {
input.style.border = "red solid 1px";
errMsg.style.display = "block";
} else {
input.style.border = "revert";
errMsg.style.display = "none";
}
input.removeAttribute("maxlength");
});

<input id="input" type="text" value="">
<div id="err-msg" style="color: red; display: none;">Input should have at most 10 characters.</div>
<div>
<button id="btn-toggle">Toggle disabled</button>
<button id="btn-report">Report validity</button>
</div>

我是否错过了说明书中的某些内容?如何利用内置的验证机制:

• 不阻止用户在输入字段中输入更多字符，
• 如果输入的字符多于允许的，则验证失败，
• 当输入较短或当字段被禁用时通过验证(无论输入长度)?

Answer 1

即使元素的约束验证被禁用，.validity属性仍然是设置的。从4.10.20.1定义

注意
当元素被禁用时，元素仍然会受到这些状态的影响;因此，即使在提交过程中验证表单不会向用户显示问题，这些状态也可以在DOM中表示。