Making a dialog field mandatory only when visible

[#1]

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.

[#2 · Accepted solution]

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

[#3]

Hi,

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

[#4]

@infinityskyline 

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