Firefox中checkValidity()对有效值返回false需调用setCustomValidity('')的问题

问题根源 #

你遇到的这个情况是Gecko引擎（Firefox的核心）的一个特殊实现细节：当你第一次触发了required的验证失败（比如空着提交表单），Gecko会在这个输入元素上留下一个内部验证状态标记。哪怕之后你输入了有效值，这个标记也不会自动清除，导致checkValidity()还是返回false。而Chrome用的Blink引擎就灵活多了，输入有效值后会自动重置这个状态。

更关键的是，setCustomValidity('')这个操作，不仅会清除自定义错误信息，还会强制Gecko重新计算元素的验证状态——这就是为什么你那段临时代码能生效的核心原因。

为什么你的临时代码能work？ #

你写的这段代码：

if (!id_('name_first').checkValidity()) { 
  id_('name_first').setCustomValidity('Please fill in your first name.'); 
  id_('name_first').reportValidity(); 
  setTimeout(function() {id_('name_first').setCustomValidity('');},2000); 
}

其实是通过延迟调用setCustomValidity('')，强制Firefox刷新了验证状态。但这确实是个绕路的办法，正常情况下输入有效值应该自动恢复验证状态才对。

更优雅的解决办法 #

不用依赖setTimeout这种hack，我们可以监听输入框的input事件，每当用户输入内容时，主动重置验证状态：

const firstNameInput = document.getElementById('name_first');

// 用户输入时自动清除错误状态，让checkValidity()重新判断
firstNameInput.addEventListener('input', function() {
  this.setCustomValidity('');
});

// 验证逻辑可以这么写
function validateFirstName() {
  const isValid = firstNameInput.checkValidity();
  if (!isValid) {
    firstNameInput.setCustomValidity('Please fill in your first name.');
    firstNameInput.reportValidity();
  }
  return isValid;
}

这样用户只要输入内容，就会自动清除之前的错误标记，checkValidity()就能正确返回true了。

补充点小知识 #

不同浏览器对HTML5表单验证的状态管理逻辑不一样：

• Chrome的Blink引擎：只要输入值满足验证规则，就自动重置所有验证相关的内部状态
• Firefox的Gecko引擎：触发过验证失败后，必须显式调用setCustomValidity('')才能让它重新计算验证结果

所以在Firefox里，只要踩过一次required的验证失败坑，后续就得靠setCustomValidity('')来“唤醒”它的正确判断。

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