Shopware 6结账页条款复选框验证仅滚动页面后生效问题

该异常是TOS勾选框位置与Shopware Storefront原生表单校验逻辑的兼容问题导致：

1. 你当前模板中，id="confirmOrderForm"的下单表单仅包裹了侧边栏的提交按钮，TOS勾选框被放在了主内容区，完全处于<form>标签外部。虽然你给勾选框加了form="confirmOrderForm"属性，能保证表单提交时参数被正常携带，但Shopware 6 前端的FormValidation插件初始化时，只会查询form标签内部的input/select/textarea元素绑定校验事件，外部通过form属性关联的字段不会被纳入即时校验监听范围。
2. 点击提交按钮时，插件仅完成了表单内部字段的校验，TOS勾选框的required必填校验仅靠浏览器原生规则拦截提交，由于插件没有监听该字段，不会触发即时的错误提示渲染、滚动定位到错误字段的逻辑，只有用户滚动页面触发视口变化时，浏览器原生的校验提示才会被渲染显示，和你遇到的症状完全吻合。

• 优先推荐方案（兼容性最好，无额外代码）：将TOS勾选块移动到#confirmOrderForm表单标签内部，保证所有需要校验的字段都处于form容器内，原生校验逻辑不需要任何修改即可正常触发即时提示。
• 若必须保留TOS勾选框在当前主内容区位置，可通过自定义JS扩展原生校验插件的字段查询逻辑，把外部TOS勾选框加入校验监听列表，参考代码如下：

import FormValidation from 'src/plugin/forms/form-validation.plugin';

document.addEventListener('DOMContentLoaded', () => {
    const confirmForm = document.querySelector('#confirmOrderForm');
    const tosCheckbox = document.querySelector('#tos');
    if (!confirmForm || !tosCheckbox) return;

    const validationInstance = window.PluginManager.getPluginInstanceFromElement(confirmForm, 'FormValidation');
    if (!validationInstance) return;

    // 重写字段获取方法，把外部TOS勾选框加入校验列表
    const originalGetFields = validationInstance._getFormFields.bind(validationInstance);
    validationInstance._getFormFields = () => {
        const fieldSet = originalGetFields();
        fieldSet.add(tosCheckbox);
        return fieldSet;
    };
});

注意：Shopware Storefront的前端交互插件默认没有兼容HTML的跨form关联元素特性，所有需要参与表单提交、即时校验的字段，放在对应form标签内部是最稳妥的实现方式，避免后续版本更新出现其他兼容问题。

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