自定义浏览器默认表单错误提示异常问题的解决方法

嘿，我来帮你搞定这个提交失败的问题！你的代码有两个核心问题导致无法正常提交：

问题根源 #

1. 错误的校验条件：你判断的是validity.typeMismatch，这个属性是用来检测输入类型不匹配的（比如type="email"时输入非邮箱格式），和你需要的最小长度校验完全不相关，所以长度不足时根本不会触发你写的自定义提示，反而会触发浏览器默认提示。
2. 错误的else分支逻辑：不管输入是否合法，你都给setCustomValidity设置了非空字符串——只要这个方法的参数不是空串，浏览器就会认为输入存在错误，直接阻止提交，哪怕输入完全符合要求。

正确的修复方案 #

我们需要针对minlength对应的校验状态（validity.tooShort）来判断，并且在输入合法时清空自定义错误提示：

第一步：保留你的HTML结构（可添加required增强校验）

<input type='text' minlength='10' id='input_text' required />

第二步：修改JavaScript逻辑

const inputField = document.getElementById("input_text");

inputField.addEventListener("input", function() {
  // 检查输入是否满足最小长度要求
  if (inputField.validity.tooShort) {
    // 长度不足时设置自定义提示
    inputField.setCustomValidity("输入内容不能少于10个字符，请补充完整！");
  } else {
    // 输入合法时必须清空提示，否则浏览器会一直判定为错误
    inputField.setCustomValidity("");
  }
});

额外说明 #

• validity.tooShort是专门对应minlength属性的校验状态，当输入长度小于minlength值时会返回true。
• 一定要记得在输入合法时把setCustomValidity设为空字符串，这是让浏览器允许提交的关键——只要这个值非空，浏览器就会认为输入有错误，直接拦截提交操作。

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