Making a dialog field mandatory only when visible

[naveen_27_05]

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 

@ Veena_Vikram

[DEBAL_DAS]

Could you please refer and try this -

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/making-a-dialog-field-mand...

[B_Sravan]

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 · Accepted solution]

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]

@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);