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

For a similar extension on AEM 62 supporting required on File Upload (Image) check this post

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


8 comments:

  1. Adobe Support | Adobe Customer Service | Support For Adobe
    http://www.techers247.com/adobe-support.html
    Toll Free:+1-844-898-4398
    Our certified and experienced technicians give immediate online Adobe Support and Adobe Customer Service for any sort of troubleshooting and other issues occurred in your adobe flash player or in other products.

    ReplyDelete
  2. Dial +1-844-898-4398 for Adobe Support Customer Service and Get Online Technical solution for Your All Adobe Products and Versions like Adobe Flash Player, Acrobat, Light Room, Illustrator etc.

    ReplyDelete
  3. Are you finding for Adobe Customer Service Number? If yes then check out the Adobe Usa,Canada helpline number @+1877-339-8403 and get most reliable Adobe technical support services.

    ReplyDelete
  4. This doesnt works with AEM6.1 SP1. Please suggest what changes should be made to make it work with SP1

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  5. Since this article refers to the old mini RTE, to make it work in 6.1 SP1, you need to do the below modifications :
    * change $invisibleText.prevAll("[type=hidden]"), to $invisibleText.prevAll(".coral-Textfield[type=hidden]"), in the function 'validate'
    * In the function "show", this.clear($invisibleText); does not work since it can't find 'this'. So, simply replicate the code of the clear function here.
    * Change the line 29 from : if (isRequired && _.isEmpty($invisibleText.val())) {
    to if (isRequired && $(CORAL_RTE).data("rteinstance").getContent().length === 0) {

    You will notice that you could still submit the touch dialog (form) even if the fields were marked red. If you add a class “foundation-validation-bind” on the submit button of the form, the dialog won’t be saved if any field inside it is marked red.

    The support for 'required' field for RTE in dialog has been added in 6.2. Although, that has been handled a little differently. In 6.1, we were using a jQuery plugin – ‘jQuery.validator’ for validation. That has been deprecated in 6.2 and we are now using our own ‘foundation-validation’ API. The jQuery.validator plugin supports limited elements and selectors (it did not support ‘div’) but the new foundation-validation API allows to provide validation for any element. Since, RTE is actually a contenteditable div, the fix in 6.2 registers validation on that div. But, it won’t work in 6.1 due to jquery plugin. So, the solution in this blogpost is using an extra input field corresponding to RTE.

    ReplyDelete
    Replies
    1. It is working for the ootb image component. when i was trying to do the same for my customized image component, it is not working .

      Delete
  6. This comment has been removed by a blog administrator.

    ReplyDelete