Dialog Field Validations

 

To add max character length validation to the richtext component, introduce "maxlength" property

<description

   jcr:primaryType="nt:unstructured"

   sling:resourceType="cq/gui/components/authoring/dialog/richtext"

   fieldLabel="Description (max 100 chars)"

   name="./description"

   useFixedInlineToolbar="{Boolean}true"

   maxlength="100">

</description>

OR 

Write custom validator in clientlib

Example 1) 

/*

 * This JS is used for validating whether the image is configured in the dialog.

 */

(function(document, $, ns) {

    "use strict";

    $(document).on("foundation-contentloaded", function() {

        var granitePopup = $(window).adaptTo("foundation-ui");

        $(".cq-dialog-submit").click(function() {

            var element= $(".image-block .cq-FileUpload-thumbnail-img");

            var firstImage = $(element[0]).find('img');

            if (firstImage && firstImage.length < 1 && element.length > 0) {

                granitePopup.prompt(Granite.I18n.get("Validation Failed "),

                    Granite.I18n.get("Verify the values of marked fields"),

                    "error", [{

                        text: Granite.I18n.get("Cancel")

                    }, {

                        text: Granite.I18n.get("OK"),

                        primary: true,

                        handler: function() {

                        }

                    }]);

                return false;

            }

        });

    });

})(document, Granite.$, Granite.author);

Example 2) 

(function (window, $) {

    'use strict';

    var RichTextMaxLengthValidation= function () {

        var CONST = {

            TARGET_GRANITE_UI: '.coral-RichText-editable',

            ERROR_MESSAGE: 'Your text length is {0} but character limit is {1}!',

        };

        function init() {

            $(window).adaptTo('foundation-registry').register('foundation.validation.validator', {

                selector: CONST.TARGET_GRANITE_UI,

                validate: function (el) {

                    var $rteField = $(el);

                    var $field = $rteField.closest('.richtext-container').find('input.coral-Form-field');

                    var maxLength = $field.data('maxlength');

                    var textLength = $rteField.text().trim().length;

                    if (maxLength && textLength > maxLength) {

                        return Granite.I18n.get(CONST.ERROR_MESSAGE, [textLength, maxLength]);

                    }

                    return null;

                }

            });

            $(document).on('keyup', CONST.TARGET_GRANITE_UI, function (e) {

                executeJqueryValidation($(this));

            });

        }

        function executeJqueryValidation(el) {

            var validationApi = el.adaptTo('foundation-validation');

            if (validationApi) {

                validationApi.checkValidity();

                validationApi.updateUI();

            }

        }

        return {

            init: init

        }

    }();

    RichTextMaxLengthValidation.init();

})(window, Granite.$);