Search code examples
cssazure-ad-b2cuser-experience

How do I make visible to the user the required fields in Azure B2C login

I'm trying to customize the B2C login mask with custom policies as shown by Microsoft documentation

On that page I cannot use Javascript for security reasons.

I need to make clear to the user that there are required fields, in the example the display name. The app starts with the "Create" button disabled (img 1), but it will be enabled simply by verifying the email. In my opinion this is confusing, because you cannot create a user until you provided every information, and clicking on the button will reveal an error message saying

"A required field is missing. Please fill out all required fields and try again"

without making clear which fields are missing (img 2).

Create button disabled

mail verified

Would be possible to make the button not enabled until every required field has been inserted? Alternatively is possible to make the required fields more visible after the user tried to register without success for example adding a red border to the "input:invalid"?

Any help is appreciated.

Solution

  • You can style the invalid fields as follows for example:

    .attrEntry.validate input.textInput:invalid {
  border: 2px solid red;
}