AAD B2C自定义策略：验证错误实时显示而非提交后显示问题

问题概述 #

在AAD B2C自定义策略中，使用Restriction或PredicateValidation配置声明验证时，错误消息会在用户输入过程中实时显示，而非点击提交按钮后触发验证并展示错误。目前的临时解决方法是使用validation technical profile，但需为每个声明单独实现技术配置文件，操作繁琐。

观察到官方演示案例中，声明验证是在提交后触发的，推测该问题可能与页面布局版本相关。

相关代码示例 #

当前使用的页面布局版本 #

<DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.20</DataUri>

密码声明及验证规则配置 #

<ClaimType Id="newPassword">
    <DisplayName>Password</DisplayName>
    <DataType>string</DataType>
    <UserHelpText>Enter password</UserHelpText>
    <UserInputType>Password</UserInputType>
    <PredicateValidationReference Id="SimplePassword" />
</ClaimType>

<PredicateValidation Id="SimplePassword">
  <PredicateGroups>
    <PredicateGroup Id="DisallowedWhitespaceGroup">
      <PredicateReferences>
        <PredicateReference Id="DisallowedWhitespace" />
      </PredicateReferences>
    </PredicateGroup>
    <PredicateGroup Id="AllowedAADCharactersGroup">
      <PredicateReferences>
        <PredicateReference Id="AllowedAADCharacters" />
      </PredicateReferences>
    </PredicateGroup>
    <PredicateGroup Id="LengthGroup">
      <PredicateReferences>
        <PredicateReference Id="IsLengthBetween8And128" />
      </PredicateReferences>
    </PredicateGroup>
</PredicateValidation>

前端输入元素（无正则模式） #

<input id="newPassword" class="textInput" type="password" placeholder="Password" title="Enter password" autocomplete="new-password" aria-required="true">

补充信息 #

• 旧版本页面布局没有输入模式正则，2.1.20版本曾包含该正则但近两周被移除，不过实时验证问题仍存在
• 非必填声明不存在此实时验证问题

可能的解决方向 #

• 降级页面布局版本：尝试切换到更早的稳定版（如2.1.10及之前版本），验证是否恢复提交后触发验证的行为
• 自定义页面布局：通过自定义HTML页面中的JavaScript代码，禁用默认的实时验证逻辑，仅保留表单提交时的后端验证：
  • 针对必填输入字段，覆盖默认的input或change事件监听
  • 确保验证逻辑仅在表单提交时执行
• 优化验证技术配置文件：创建通用的validation technical profile，通过参数传递不同的验证规则，减少重复配置工作量

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