Making a dialog field mandatory only when visible

Avatar

Avatar
Validate 1
Level 1
infinityskyline
Level 1

Like

1 like

Total Posts

15 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
infinityskyline
Level 1

Like

1 like

Total Posts

15 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
infinityskyline
Level 1

09-03-2021

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,048 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,048 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile
Veena_Vikram
MVP

09-03-2021

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

Answers (2)

Answers (2)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,430 likes

Total Posts

3,305 posts

Correct reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,430 likes

Total Posts

3,305 posts

Correct reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

09-03-2021

Hi,

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

Avatar

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

275 likes

Total Posts

320 posts

Correct reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

275 likes

Total Posts

320 posts

Correct reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
Anudeep_Garnepudi
MVP

09-03-2021

@infinityskyline 

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