Required Validation not working on multiselect and multiselect-checkboxes

[luca-peruzzo]

Hi @garronej this is more a request for clarification than an issue, but if I override kcContext with custom fileds (like your favourite-pet implementation) I can't se any required validation for multiselect and multiselect-checkboxes. is it done on purpose? if yes, why? I've tried it on angular, does it work on react? This is my code:

  window.kcContext = getKcContextMock({
    pageId: 'register.ftl',
    overrides: {
      profile: {
        attributesByName: {
          favoritePet: {
            name: 'favorite-pet',
            displayName: '${profile.attributes.favoritePet}',
            validators: {
              options: {
                options: ['cat', 'dog', 'fish'],
              },
            },
            annotations: {
              inputType: 'multiselect',
              inputOptionLabelsI18nPrefix: 'profile.attributes.favoritePet.options',
            },
            required: true,
            readOnly: false,
          } satisfies Attribute,
        },
      },
      'x-keycloakify': {
        messages: {
          'profile.attributes.favoritePet': 'Favorite Pet',
          'profile.attributes.favoritePet.options.cat': 'Fluffy Cat',
          'profile.attributes.favoritePet.options.dog': 'Loyal Dog',
          'profile.attributes.favoritePet.options.fish': 'Peaceful Fish',
        },
      },
    },
  });

FYI @kathari00

[garronej]

Hello @luca-peruzzo,

I don't know, I'm not aware of any validation that would be missing but it's very much possible.

You can try simply with the react project with:

git clone https://github.com/keycloakify/keycloakify-starter
cd keycloakify-starter
yarn
npx keycloakify start-keycloak

Here you can reach https://localhost:8080, navigate to myrealm -> user profile attributes, create your attributes.

Save, navigate to https://my-theme.keycloakify.dev see if it's broken or not.

If it's broken please provide some screenshot, reproduction steps, and expected behavior. I'll adress it.

If it works as expected it means that the issue is at the angular integration level.

Best,