Making a dialog field mandatory only when visible | Community
Skip to main content
N
naveen_27_05
Level 2
January 29, 2023
Solved

Making a dialog field mandatory only when visible

  • January 29, 2023
  • 4 replies
  • 1338 views

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.

 


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.

 

Thanks.

 

 

 

@arunpatidar 

@ 

 

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 Nupur_Jain

Hi @naveen_27_05 

 

You can use Foundation Validator.You can follow this blog https://aemhints.com/2020/11/02/validating-dialog-value/

Here, if you check, field is checked against regex and if regex matches, js function return nothing which means field is valid otherwise it returns some error message. You can use this same concept where instead of regex you can write your logic to check if another filed is hidden or not using jquery and choose to return error or not.

 

Hope it helps!

 

Let me know if you need more information. 

 

Thanks,

Nupur

4 replies

DEBAL_DAS
DEBAL_DAS
New Member
January 29, 2023

Could you please refer and try this -

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/making-a-dialog-field-mandatory-only-when-visible/td-p/399534

Debal Das, Senior AEM Consultant
    B_Sravan
    Community Advisor
    B_SravanCommunity Advisor
    Community Advisor
    January 29, 2023

    There are no inbuilt JCR properties to achieve this. However, you can still accomplish this by loading a js through extra client libs. The idea here is to add the "aria-required, true" property only when the show field is valid.


      Nupur_Jain
      Adobe Employee
      Nupur_JainAdobe EmployeeAccepted solution
      Adobe Employee
      January 30, 2023

      Hi @naveen_27_05 

       

      You can use Foundation Validator.You can follow this blog https://aemhints.com/2020/11/02/validating-dialog-value/

      Here, if you check, field is checked against regex and if regex matches, js function return nothing which means field is valid otherwise it returns some error message. You can use this same concept where instead of regex you can write your logic to check if another filed is hidden or not using jquery and choose to return error or not.

       

      Hope it helps!

       

      Let me know if you need more information. 

       

      Thanks,

      Nupur

        Anudeep_Garnepudi
        Community Advisor
        Anudeep_GarnepudiCommunity Advisor
        Community Advisor
        January 30, 2023

        @naveen_27_05 

        Try below code

         

         

        (function($, Coral) { "use strict"; var registry = $(window).adaptTo("foundation-registry"); registry.register("foundation.validation.validator", { selector: "[name='./selectField']", validate: function(element) { hideFields(element.value); } }); $(document).on("dialog-ready", function() { hideFields($("[name='./selectField']").val()); }); const hideFields = (value) => { if(value == 'hide') { $("[name='./title']").removeProp("required").removeAttr("aria-required").closest(".coral-Form-fieldwrapper").hide(); // Add more fields to hide } else { $("[name='./title']").prop("required", "required").attr("aria-required", "true").closest(".coral-Form-fieldwrapper").show(); // Add more fields to show } }; })(jQuery, Coral);

         

         

        AG
          Terms & ConditionsAccessibility statement

          Loading footer...