Using show/hide dropdown with required fields in AEM.

[Sriga2898]

Hi,

I am using dropdown field with show/hide property which has two 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

[Ganthimathi_R]

@Sriga2898 

Could you please share your dialog’s .content.xml file?

[BrianKasingli · Accepted solution]

@Sriga2898 , you will need to create custom JavaScript code to delete the HTML input fields when author's select on either option for A or B.

It's expected that when you select A, then some fields will be removed from the Touch UI experience (not hidden). This can be achieved with something like:

var elem = document.querySelector('#some-element');
elem.parentNode.removeChild(elem);

or in Jquery
$('#some-element').remove();

 hint:

1. try to inspect element on the page and completely remove the input field. Save, and you'll see the required field is not mandatory to the Touch UI popup anymore.

2.use Granite UI common fields, in particular, the granite:class property to find fields that you are trying to remove.

[user01327]

Can someone please provide complete solution for it. I am also facing similar issue

I have two dropdown value in my dialog

First is Variation One and Second is Variation two, in Variation two I have one required field and in Variation One there is no required field

The problem I am facing is like if I authored the fields in variation one so it is throwing error.