为何禁用的表单元素仍会触发maxlength校验？

关于规范的疑问 #

你提到的规范确实明确禁用元素应排除在约束校验之外，但浏览器对maxlength的tooLong校验逻辑存在特殊处理——原生maxlength同时承担「限制输入长度」和「校验长度」两个职责，早期浏览器仅实现了输入限制，后续新增校验逻辑时，未完全将禁用状态与tooLong的判断绑定，导致禁用字段仍会返回tooLong: true，这属于浏览器实现与规范的偏差，并非你遗漏了规范内容。

解决方案：利用内置校验机制实现需求 #

要满足你的三个需求，需放弃原生maxlength（避免它阻止输入），转而通过自定义校验结合内置表单校验API实现：

步骤1：HTML结构调整 #

移除原生maxlength属性，改用自定义data-maxlength存储最大长度阈值，保留表单及控制元素：

<form id="myForm">
  <input type="text" id="textInput" data-maxlength="10">
  <button type="button" id="toggleDisable">禁用/启用输入框</button>
  <button type="submit">校验表单</button>
  <div id="errorMsg" style="color: red; display: none;"></div>
</form>

步骤2：JS校验逻辑实现 #

通过监听输入事件、禁用状态变化及表单提交事件，结合setCustomValidity控制内置校验状态：

const textInput = document.getElementById('textInput');
const toggleBtn = document.getElementById('toggleDisable');
const form = document.getElementById('myForm');
const errorMsg = document.getElementById('errorMsg');

// 切换禁用状态
toggleBtn.addEventListener('click', () => {
  textInput.disabled = !textInput.disabled;
  // 禁用时立即重置校验状态
  validateInput();
});

// 实时校验输入内容
textInput.addEventListener('input', validateInput);

// 表单提交时触发校验
form.addEventListener('submit', (e) => {
  e.preventDefault();
  validateInput();
  if (textInput.validity.valid) {
    errorMsg.style.display = 'none';
    alert('校验通过');
  } else {
    errorMsg.textContent = `输入内容不能超过${textInput.dataset.maxlength}个字符`;
    errorMsg.style.display = 'block';
  }
});

// 核心校验函数
function validateInput() {
  const maxLength = parseInt(textInput.dataset.maxlength);
  if (textInput.disabled) {
    // 禁用状态下强制校验通过
    textInput.setCustomValidity('');
    return;
  }
  if (textInput.value.length > maxLength) {
    textInput.setCustomValidity('内容过长');
  } else {
    textInput.setCustomValidity('');
  }
}

需求匹配说明 #

• 不阻止用户输入超长内容：移除原生maxlength后，输入框不再限制输入长度，用户可自由输入。
• 内容超长时校验失败：通过validateInput函数判断长度，调用setCustomValidity设置错误，触发内置validity.valid变为false。
• 字段禁用时校验通过：校验逻辑优先判断disabled状态，禁用时直接清空自定义错误，确保validity.valid为true。

内容的提问来源于stack exchange，提问作者Jakub Janowski