Azure AD B2C Custom UI error labels shown on first load

问题

I have an Azure AD B2C tenant.

I have created a (default) SignUpAndSignInPolicy and added a custom UI template for the sign-in page, the sign-up page and the reset-password page.

All is working well except, on the sign-up page as well as on the reset-password page, the form input fields are always marked "invalid" on the initial load. This causes the error hint to be visible, although there was no user input yet into the form field.

I want to have the same experience as on the sample page of microsoft: https://woodgrovegroceriesb2c.azurewebsites.net/

What ever I try, the error labels are shown on my design upon first page load:

How can I solve this? What am I missing?

回答1:

The Woodgrove Groceries custom page UIs show and hide the field errors as follows:

.attrEntry .error.itemLevel,
.attrEntry .helpText,
.attrEntry .tiny {
  display: none!important;
}

.attrEntry .error.itemLevel.show {
  display: block!important;
}

来源：https://stackoverflow.com/questions/52296225/azure-ad-b2c-custom-ui-error-labels-shown-on-first-load