Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
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
Community Advisor

@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
Community Advisor

@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