为何输入值符合要求仍触发输入验证错误？

问题根源在于你仅给输入框绑定了oninvalid事件设置自定义错误提示，但未在输入恢复有效时重置错误状态。一旦调用setCustomValidity()传入非空字符串，浏览器就会认定该输入框始终存在错误——哪怕后续输入符合规则，这个错误标记也不会自动清除。

解决方法很简单，给输入框添加oninput事件，在用户输入时清空自定义错误提示，让浏览器重新执行验证逻辑：

<input 
  type="text" 
  name="username" 
  id="username"
  placeholder="Create unique username"
  pattern="[A-Za-z]{6,12}" 
  required 
  oninvalid="this.setCustomValidity('Username must contain only letters, and length has to be between 6 and 12 character')" 
  oninput="this.setCustomValidity('')"
>

核心逻辑说明：

• 当输入不符合规则触发oninvalid时，自定义错误提示被设置，输入框被标记为无效状态
• 用户修改输入内容时，oninput事件触发，调用setCustomValidity('')清空错误状态，浏览器会重新检查输入是否符合pattern和required的要求
• 后续输入符合规则时，输入框就能恢复有效状态，表单可正常提交

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