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

Question

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

Imran Khan · Accepted Answer

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