Chrome 65版本中setCustomValidity函数失效问题求助

我之前在Chrome 65版本开发表单验证时，刚好踩过这个setCustomValidity的坑！当时也是跟你一样，Firefox正常触发提示，Chrome却毫无反应，折腾了好一会儿才找到原因和解决办法。

问题根源 #

Chrome 65对表单验证的触发逻辑做了调整——仅仅调用setCustomValidity()设置错误信息，并不会自动触发浏览器的验证提示弹窗。而Firefox在元素失去焦点（blur）时会自动检查元素的验证状态并显示提示，Chrome却需要我们手动触发验证流程。

可行解决方案 #

• 方案一：调用reportValidity()手动触发提示
  修改oninput事件处理逻辑，在设置自定义错误后，调用元素的reportValidity()方法，它会强制浏览器检查验证状态并显示对应的提示：

  <input type="text" id="username" required placeholder="Enter Name" 
         oninput="this.setCustomValidity('error'); this.reportValidity();" />
  

  不过要注意：如果用户后续输入了符合要求的内容，记得重置自定义错误，不然提示会一直显示。比如可以加个简单判断：

  <input type="text" id="username" required placeholder="Enter Name" 
         oninput="if (this.value.length < 3) { 
                   this.setCustomValidity('用户名长度不能少于3位'); 
                   this.reportValidity(); 
                 } else { 
                   this.setCustomValidity(''); 
                 }" />
  

• 方案二：在blur事件中处理验证
  既然Firefox是在失去焦点时触发提示，我们可以把验证逻辑放到blur事件里，这样Chrome和Firefox的表现会更一致：

  <input type="text" id="username" required placeholder="Enter Name" 
         oninput="this.setCustomValidity('');"
         onblur="if (!this.value) { 
                   this.setCustomValidity('请输入用户名'); 
                   this.reportValidity(); 
                 }" />
  

  这里配合oninput事件提前清空错误信息，避免用户输入后仍残留之前的提示。

• 方案三：表单提交时统一验证
  如果是完整的表单提交场景，推荐在表单的submit事件中统一处理验证逻辑，这样能确保所有浏览器都能正确触发提示：

  <form onsubmit="return validateUsername()">
    <input type="text" id="username" required placeholder="Enter Name" />
    <button type="submit">提交</button>
  </form>
  <script>
  function validateUsername() {
    const usernameInput = document.getElementById('username');
    // 先清空之前的错误信息
    usernameInput.setCustomValidity('');
    
    if (usernameInput.value.length < 3) {
      usernameInput.setCustomValidity('用户名长度不能少于3位');
      usernameInput.reportValidity();
      return false; // 阻止表单提交
    }
    return true;
  }
  </script>
  

关键注意点 #

无论用哪种方案，一定要在验证通过时调用setCustomValidity('')清空错误信息——只要自定义错误信息不为空，元素就会被标记为无效状态，后续的验证逻辑也会受影响。

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