Azure B2C自定义注册页验证异常：直接访问SignUp策略触发错误状态

我之前做Auth自定义UI时碰到过一模一样的问题，折腾了好一阵才摸清楚根源，给你分享下我的解决方案：

问题根源 #

直接访问SignUp策略页面时，浏览器的原生表单校验机制会在页面加载完成后立刻触发，而此时身份服务（比如Auth0/Cognito）的表单初始化脚本可能还没完全挂载，没法接管校验逻辑，导致所有空输入框都被自动加上input:invalid类，显示错误状态。但从SignInSignUp页面跳转过来时，整个页面的初始化流程是连贯的，身份服务的脚本已经提前加载完成，会自动重置表单的校验状态，所以不会出现这个问题。

具体解决步骤 #

• 禁用浏览器原生校验
  最简单的办法就是给注册表单添加novalidate属性，把校验的控制权完全交给身份服务的自定义逻辑，避免浏览器抢先触发校验：

  <form id="signup-form" novalidate>
    <!-- 你的注册输入框、按钮等元素 -->
  </form>
  

• 手动重置校验状态
  如果需要保留部分原生校验逻辑，可以在页面加载完成后（或者身份服务的ready事件触发后），手动清空所有输入框的校验状态：

  // 以Auth0为例，监听SDK加载完成事件
  window.addEventListener('load', () => {
    const signupForm = document.getElementById('signup-form');
    if (signupForm) {
      Array.from(signupForm.querySelectorAll('input')).forEach(input => {
        // 清除自定义校验信息
        input.setCustomValidity('');
        // 移除浏览器自动添加的invalid类（如果你的CSS是基于这个类样式的）
        input.classList.remove('invalid');
      });
    }
  });
  

• 检查身份服务策略配置
  有些身份服务的SignUp策略默认开启了「页面加载时自动触发校验」的选项，你可以登录后台找到对应策略的表单配置，把这个选项关掉，改为仅在用户交互（比如输入内容、点击提交）后触发校验。

额外排查点 #

你还可以检查下自定义UI的脚本加载顺序，确保身份服务的SDK脚本（比如auth0.js或者aws-amplify.js）在表单HTML渲染之前就加载完成，这样表单渲染时，SDK已经能接管校验逻辑，不会让浏览器原生校验有机可乘。

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