Using show/hide dropdown with required fields in AEM. | Community
Skip to main content
S
Sriga2898
New Participant
September 7, 2022
Solved

Using show/hide dropdown with required fields in AEM.

  • September 7, 2022
  • 3 replies
  • 1796 views

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

 

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by BrianKasingli

    @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.

    3 replies

    U
    user01327
    New Participant
    November 6, 2023

    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.

    BrianKasingli
    BrianKasingliAccepted solution
    New Participant
    September 7, 2022

    @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.

      G
      GanthiRa1
      New Participant
      September 7, 2022

      @sriga2898 

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

        Terms & ConditionsAccessibility statement

        Loading footer...