Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Making a dialog field mandatory only when visible

infinityskyline
Level 2
Level 2

Hi,

I have a drop down with 4 options (a, b, c, d). Upon selection of option b, I show certain fields and hide these fields when rest 3 options are selected. 

I followed https://levelup.gitconnected.com/aem-conditionally-show-or-hide-fields-in-touchui-dialogs-with-coral.... for the implementation and its working fine.

 

Problem: I need to make these conditional items mandatory only when they are visible (i.e, option b is selected). Adding the flag 

required="{Boolean}true" is not solving the purpose as AEM expect it to be filled up even when it is hidden.

AEM coral touc ui dialog
1 Accepted Solution
Veena_Vikram
Correct answer by
Community Advisor
Community Advisor

As @Arun_Patidar mentioned , you have to write custom Jquery to handle these. In you script , you have to see when the option b is selected , using script , set the property "aria-required" true , for these elements. I have done something similar in my proj , where I had to make fields mandatory when the tab is visible. Its the same logic. When your options are visible, you can use the below logic to set the fields mandatory

 

$("name='./<your field name>'").attr("aria-required", "true");

 

There are few more things you have to take care

  1. While setting the field true, add * symbol to the label via jquery  
  2. When the field is hidden, make sure you set the above values to false  and remove the * via jquery

 

If you are not good with Jquery , get help from a FE developer. 

 

Thanks

Veena

View solution in original post

3 Replies
Anudeep_Garnepudi
Community Advisor
Community Advisor

@infinityskyline 

Set aria-required or/and required attribute values to false along with hiding the field and set true when showing the field.

Arun_Patidar
Community Advisor
Community Advisor

Hi,

you need to write custom validation instead of relying on OOTB required property.

Veena_Vikram
Correct answer by
Community Advisor
Community Advisor

As @Arun_Patidar mentioned , you have to write custom Jquery to handle these. In you script , you have to see when the option b is selected , using script , set the property "aria-required" true , for these elements. I have done something similar in my proj , where I had to make fields mandatory when the tab is visible. Its the same logic. When your options are visible, you can use the below logic to set the fields mandatory

 

$("name='./<your field name>'").attr("aria-required", "true");

 

There are few more things you have to take care

  1. While setting the field true, add * symbol to the label via jquery  
  2. When the field is hidden, make sure you set the above values to false  and remove the * via jquery

 

If you are not good with Jquery , get help from a FE developer. 

 

Thanks

Veena

View solution in original post