Making a dialog field mandatory only when visible

Forum|Forum|3 years ago
January 29, 2023
4 replies
1326 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

Anudeep_Garnepudi

New Participant

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

Nupur_JainAccepted solution

Employee