HTML5注册表单滚动提交时required校验失效问题求助

• 长注册表单滚动至底部提交时，HTML5 required字段校验失效；但浏览器窗口缩小到表单完整显示时，校验功能正常
• 问题存在偶发性：同一Chrome版本下，部分设备正常，部分设备异常

用户提供的示例代码：

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
</head>
<body>
    <form action="register_confirmation.php" name="registration" id="registration" method="POST">
         <!---------------First Name-------------- -->
         <label class="fname_lbl"><b>Name</b> </label>
         <input type="text" name="fname" id="fname" placeholder="fname" required="" 
         oninvalid="this.setCustomValidity('Please enter name')" onchange="this.setCustomValidity('')" />
         <button type="submit" class="common_btn" id="cmn_btn">submit</button>
   </form>
</body>
</html>

1. Chrome视口外元素校验BUG #

这是Chrome浏览器的已知兼容性问题：当需要校验的表单元素不在当前视口范围内时，原生HTML5校验逻辑可能被跳过，尤其是在移动端或高分辨率设备上容易触发，这也解释了问题的偶发性。

修复方案： #

手动接管表单提交的校验流程，确保校验触发并定位到错误字段：

// 给提交按钮绑定点击事件
document.getElementById('cmn_btn').addEventListener('click', function(e) {
  const form = document.getElementById('registration');
  // 手动触发表单校验
  if (!form.checkValidity()) {
    e.preventDefault(); // 阻止默认提交
    // 找到第一个无效字段并聚焦
    const invalidField = form.querySelector(':invalid');
    invalidField.focus();
    // 触发原生校验提示
    invalidField.reportValidity();
  }
});

同时优化输入框的自定义提示逻辑，将onchange改为oninput，确保用户输入时立即清空错误提示，避免干扰原生校验：

<input type="text" name="fname" id="fname" placeholder="fname" required 
       oninvalid="this.setCustomValidity('Please enter name')"
       oninput="this.setCustomValidity('')" />

2. 视口配置异常 #

当前viewport设置的minimum-scale=1.0可能在部分设备上导致页面缩放行为异常，使得浏览器无法正确识别元素是否在视口内，进而影响校验触发。

修复方案： #

优化视口配置，统一页面缩放行为：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

3. 表单元素CSS定位干扰 #

如果长表单或其包含元素使用了position: fixed、transform等CSS属性，可能导致浏览器无法正确判断元素的视口位置，从而跳过校验。

修复方案： #

检查表单及父元素的CSS样式，移除可能干扰视口判断的定位属性；若必须使用固定定位，可在校验不通过时手动滚动到错误元素位置：

// 在之前的校验代码中添加滚动逻辑
invalidField.scrollIntoView({ behavior: 'smooth', block: 'center' });

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