Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Required Fields and Dropdown Help in AEM as Cloud

Avatar

Level 1

Hi,

I am using dropdown field with show/hide property which has four values and it will populate different set of required field items based upon the selection.So, when i author and try to save any one of the dropdown items , it throws error showing the required fields in other dropdown items are not authored.

Could you please suggest whether we can use required fields with show/hide property and let me know your thoughts on this.

 

Thanks

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@prasanthnapa2904 

It can be achieved by following code
1. add granite:data for all those fields.
2. add extraclientlibs prop at dialog level.

3. create a new clientlib with following code
$(document).on("change", .......capture-the-dropdown...function (e) {

capture all fields by using css class mentioned in granite:data earlier.

capturedField.adaptTo("foundation-field").setRequired(false);

}

 

I hope it helps.

View solution in original post

5 Replies

Avatar

Community Advisor

Hi @prasanthnapa2904 

You can use required field in show/hide for the dropdown but you will have to make sure that required field is removed when you switch back to different selection.
This validation can be applied through jQuery/JavaScript so on show hide of the dropdown selection you will have to add and remove required field.

Avatar

Community Advisor

Hi @prasanthnapa2904 

 

Create a custom JS and add the below logic

 

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

 

Hope it helps!

Thanks,
Kiran Vedantam.

Avatar

Correct answer by
Community Advisor

@prasanthnapa2904 

It can be achieved by following code
1. add granite:data for all those fields.
2. add extraclientlibs prop at dialog level.

3. create a new clientlib with following code
$(document).on("change", .......capture-the-dropdown...function (e) {

capture all fields by using css class mentioned in granite:data earlier.

capturedField.adaptTo("foundation-field").setRequired(false);

}

 

I hope it helps.

Avatar

Level 1

Can someone please provide the end to end solution for it.I am also facing the same issue