AEM 6440 - Content Fragment Editor Set Multi line text Required

Goal


Set the Multi line text widget required (Plain / Markdown / Richtext)

Demo | Package Install | Github


Multi Line in Model



Set Required in CRX Manually



Content Fragment Editor Error



Solution


1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-cfm-multi-line-text-required-validator

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-cfm-multi-line-text-required-validator and set a property categories of String type to dam.cfm.authoring.contenteditor.v2dependencies of type String[] with value underscore

3) Create file ( type nt:file ) /apps/eaem-cfm-multi-line-text-required-validator/clientlib/js.txt, add the following

                         multiline-required.js

4) Create file ( type nt:file ) /apps/eaem-cfm-multi-line-text-required-validator/clientlib/multiline-required.js, add the following code

(function ($, $document) {
    var CFM = window.Dam.CFM,
        EAEM_INVISIBLE_CLASS = "eaem-text-invisible",
        PLAIN_MARKDOWN_SELECTOR = "textarea.plaintext-editor, textarea.markdown-editor",
        registry = $(window).adaptTo("foundation-registry");

    //for plain text, markdown
    registry.register("foundation.validation.validator", {
        selector: PLAIN_MARKDOWN_SELECTOR,
        validate: validator
    });

    //for richtext
    registry.register("foundation.validation.validator", {
        selector:  "." + EAEM_INVISIBLE_CLASS,
        validate: validator,
        show: function (invisibleText, message) {
            $(invisibleText).prevAll("[data-cfm-richtext-editable]").css("border-color", "#e14132");
        },
        clear: function (invisibleText) {
            $(invisibleText).prevAll("[data-cfm-richtext-editable]").css("border-color", "#d0d0d0");
        }
    });

    CFM.Core.registerReadyHandler(registerRTEValidator);

    function registerRTEValidator(){
        var $cfmMultiEditor = $(".cfm-multieditor");

        if ($cfmMultiEditor.find(".coral-Form-field").attr("aria-required") !== "true") {
            return;
        }

        var $multiLineLabel = $cfmMultiEditor.find(".cfm-multieditor-embedded-label");

        $multiLineLabel.html($multiLineLabel.html() + " *");

        var $rte = $("textarea.rte-sourceEditor");

        if(!_.isEmpty($rte)){
            //coral validation framework ignores hidden and contenteditable fields, so add an invisible text field
            //the text field is just for registering a validator
            var $eaemCopyField = $("<input type=text style='display:none' class='" + EAEM_INVISIBLE_CLASS + "'/>")
                                        .insertAfter($rte);

            var $rteEditable = $rte.prev("[data-cfm-richtext-editable]");

            $eaemCopyField.val($rteEditable.text().trim());

            checkValidity.call($eaemCopyField[0]);

            $rte.prev("[data-cfm-richtext-editable]").on("input", function() {
                $eaemCopyField.val($(this).text().trim());
                checkValidity.call($eaemCopyField[0]);
            });
        }else{
            //$(PLAIN_MARKDOWN_SELECTOR).each(checkValidity);
        }
    }

    function checkValidity() {
        var foundationValidation = $(this).adaptTo("foundation-validation");
        foundationValidation.checkValidity();
        foundationValidation.updateUI();
    }

    function validator(element){
        var $element = $(element),
            $cfmMultiLineField = $element.closest(".cfm-multieditor").find(".coral-Form-field");

        if ($cfmMultiLineField.attr("aria-required") !== "true") {
            return;
        }

        if (!_.isEmpty($element.val())) {
            return;
        }

        return Granite.I18n.get("Please fill out this field.");
    }
}(jQuery, jQuery(document)));


3 comments:

  1. Hey Sreekanth, Could you please help with - how can i use multiline editor data type as a multifield? Currently that option is not available as default with CF model.

    ReplyDelete
  2. Is there any input on questions above?

    ReplyDelete
  3. Hey everyone, I am also not getting the red tool tip with the message. But with multiple multi-line text fields, I made some changes and this is what you need to have for your method registerRTEValidator():

    function registerRTEValidator() {
    var $cfmMultiEditor = $(".cfm-multieditor");

    if ($cfmMultiEditor.length > 0) {

    $cfmMultiEditor.each(function() {
    if ($(this).find(".coral-Form-field").attr("aria-required") !== "true") {
    return;
    }
    let $multiLineEmbeddedLabel = $(this).find(".cfm-multieditor-embedded-label");
    let $multiLineTopLabel = $(this).find(".cfm-multieditor-top-label");
    $multiLineEmbeddedLabel.html($multiLineEmbeddedLabel.html() + " *");
    $multiLineTopLabel.html($multiLineTopLabel.html() + " *");
    let $rte = $(this).find("textarea.rte-sourceEditor");
    if (!_.isEmpty($rte)) {
    //coral validation framework ignores hidden and contenteditable fields, so add an invisible text field
    //the text field is just for registering a validator
    let $eaemCopyField = $("<_input_ type=text style='display:none' class='" + EAEM_INVISIBLE_CLASS + "'/>")
    .insertAfter($rte);

    let $rteEditable = $rte.prev("[data-cfm-richtext-editable]");

    $eaemCopyField.val($rteEditable.text().trim());

    checkValidity.call($eaemCopyField[0]);

    $rte.prev("[data-cfm-richtext-editable]").on("input", function () {
    $eaemCopyField.val($(this).text().trim());
    checkValidity.call($eaemCopyField[0]);
    });
    } else {
    //$(PLAIN_MARKDOWN_SELECTOR).each(checkValidity);
    }
    });
    }
    }

    it won't allow me to add the input element's HTML markup as it was, so just remove the underscores before and after the input tag name.

    ReplyDelete