AEM 61 - Support Required Property on RichText Editor (RTE) in Touch UI Dialogs

Goal

Adding property required=true on dialog widget node marks the field required in a dialog. So user cannot leave the field empty and save dialog; required flag is supported on some granite (coral) widgets like textfield

This post is on adding necessary js logic for supporting required flag on Touch UI Rich Text Editors

Demo | Package Install


Inline Dialog



Full Screen Dialog

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/touchui-rte-required

2 Create node /apps/touchui-rte-required/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.authoring.dialog and dependencies value underscore

3) Create file (nt:file) /apps/touchui-rte-required/clientlib/js.txt and add

                      required.js

4) Create file (nt:file) /apps/touchui-rte-required/clientlib/required.js and add the following code.

(function ($, $document) {
    var CORAL_RTE = ".coral-RichText",
        //copied from /etc/clientlibs/granite/coralui2/js/validations.js
        fieldErrorEl = $("<span class='coral-Form-fielderror coral-Icon coral-Icon--alert coral-Icon--sizeS'" +
"data-init='quicktip' data-quicktip-type='error' />");

    $document.on("dialog-ready", function() {
        //coral validation framework ignores hidden and contenteditable fields, so add an invisible text field
        //the text field is just for registering a validator
        $(CORAL_RTE).after("<input type=text style='display:none'/>");

        $(CORAL_RTE).on("input", function() {
            var $invisibleText = $(this).nextAll("input:text").val($(this).text().trim());

            $invisibleText.checkValidity();
            $invisibleText.updateErrorUI();
        })
    });

    //register the validator on richtext invisible text field
    $.validator.register({
        selector: ".richtext-container > input:text",

        validate: function ($invisibleText) {
            var $hidden = $invisibleText.prevAll("[type=hidden]"),
                isRequired = $hidden.attr("required") === true
                                    || $hidden.attr("aria-required") === "true";

            if (isRequired && _.isEmpty($invisibleText.val())) {
                return $invisibleText.message("validation.required") || "required";
            }

            return null;
        },

        show: function ($invisibleText, message) {
            this.clear($invisibleText);

            var field = $invisibleText.prevAll(CORAL_RTE),
                arrow = field.closest("form").hasClass("coral-Form--vertical") ? "right" : "top";

            fieldErrorEl.clone()
                .attr("data-quicktip-arrow", arrow)
                .attr("data-quicktip-content", message)
                .insertAfter(field);

            field.attr("aria-invalid", "true").toggleClass("is-invalid", true);
        },

        clear: function ($invisibleText) {
            var field = $invisibleText.prevAll(CORAL_RTE);

            field.removeAttr("aria-invalid").removeClass("is-invalid")
                    .nextAll(".coral-Form-fielderror").tooltip("hide").remove();
        }
    });
})(jQuery, jQuery(document));

5) To mark a rich text editor required in dialog, set the property required to boolean true