Safari浏览器调用reportValidity方法时不显示表单原生验证提示的问题

核心差异原因 #

• Safari 与 Chromium 系浏览器对原生表单校验的实现逻辑存在兼容差异：
• 对整个表单元素调用reportValidity()方法时，Chrome 会依次完成校验规则比对、聚焦到首个未达标的输入项、同时弹出系统默认的校验提示浮层，展示对应提示文本
• Safari 对表单级别的reportValidity()方法仅会执行校验逻辑、将焦点移动到第一个不合规的表单项上，不会主动渲染对应的原生校验浮层，这是 Safari 长期存在的实现行为，并非代码语法写错导致的异常

跨浏览器兼容实现方案 #

• 适配思路：绕开 Safari 对表单级reportValidity()的实现缺陷，在校验识别到不合规字段后，对单个字段实例调用reportValidity()——Safari 对单元素的该方法实现是完整支持弹出原生提示浮层的
• 调整后的参考代码：
  原逻辑仅对整个表单对象调用方法，优化后的代码如下：

function check(){
  const form = document.getElementById('form');
  // 执行全表校验，获取校验结果
  const isAllPassed = form.checkValidity();
  if(!isAllPassed){
    // 定位到第一个未通过校验的表单项
    const firstInvalidField = form.querySelector(':invalid');
    if(firstInvalidField){
      // 对单个字段调用方法，触发Safari的原生提示浮层
      firstInvalidField.reportValidity();
    }
  }
}

• 补充注意点：
• 原代码中check函数预留的e参数没有实际使用价值，保留反而可能在 Safari 下出现隐式事件绑定冲突，建议移除
• 如果需要统一不同浏览器下的提示视觉效果，不依赖系统原生浮层的话，可以读取字段自带的validationMessage属性内容，自行实现自定义提示组件，就能实现全浏览器一致的展示效果

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