Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

How to write custom JavaScript to make the dropdown fields mandatory in AEM

Avatar

Level 3

I have a author-required media-type dropdown with options of image and video. Again video type as aem video and Vidyard options. 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Level 10

@Anilkumar9 This is a custom implementation. Create one client lib within component folder and paste below code as part of js. On dialog submit target html element using JQuery with the help of one of front end dev from your team.

Link is to include clientlib as part of component. 

(function($) {
    "use strict";

    $(document).on("click", ".cq-dialog-submit", function (e) {

        let validationPassed = true;

        // Target html element using JQuery with the help of front end dev
        if (!selected) {
            validationPassed = false;
            $(".coral3-Tab.is-selected").addClass("is-invalid");
            
            // Shw error for target element
            $("target_element").after(createTooltip("Error: Maximum of " + maxItems + " tabs are allowed."));
        }
        
        return validationPassed;
    });

    function createTooltip(content) {
        return $("<coral-tooltip>", {
            class: "coral3-Tooltip coral3-Tooltip--arrowUp is-open coral3-Tooltip--error",
            "aria-hidden": false,
            variant: "error",
            tabindex: -1,
            role: "tooltip",
            open: "",
            id: "coral-id-645",
            style: "z-index: 10020; max-width: 1422px; left: 130.498px; top: -45.0062px; display: block;",
            html: $("<coral-tooltip-content>").text(content)
        });
    }
})(jQuery);

View solution in original post

3 Replies

Avatar

Correct answer by
Level 10

@Anilkumar9 This is a custom implementation. Create one client lib within component folder and paste below code as part of js. On dialog submit target html element using JQuery with the help of one of front end dev from your team.

Link is to include clientlib as part of component. 

(function($) {
    "use strict";

    $(document).on("click", ".cq-dialog-submit", function (e) {

        let validationPassed = true;

        // Target html element using JQuery with the help of front end dev
        if (!selected) {
            validationPassed = false;
            $(".coral3-Tab.is-selected").addClass("is-invalid");
            
            // Shw error for target element
            $("target_element").after(createTooltip("Error: Maximum of " + maxItems + " tabs are allowed."));
        }
        
        return validationPassed;
    });

    function createTooltip(content) {
        return $("<coral-tooltip>", {
            class: "coral3-Tooltip coral3-Tooltip--arrowUp is-open coral3-Tooltip--error",
            "aria-hidden": false,
            variant: "error",
            tabindex: -1,
            role: "tooltip",
            open: "",
            id: "coral-id-645",
            style: "z-index: 10020; max-width: 1422px; left: 130.498px; top: -45.0062px; display: block;",
            html: $("<coral-tooltip-content>").text(content)
        });
    }
})(jQuery);

Avatar

Level 6

@Anilkumar9 

You can also go with Foundation Validation which is a best practice while applying custom validations on dialog fields.

https://blogs.perficient.com/2017/11/06/aem-touch-ui-dialog-validation-new-best-practice-use-foundat...

 

Avatar

Administrator

@Anilkumar9 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.



Kautuk Sahni