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

[Anilkumar9]

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

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

[salamswapnil]

@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...

[kautuk_sahni]

@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.