Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

custom validation for coral text filed

Sandeep6
Level 5
Level 5

Hi all,

I am using below code for validation for text field in dialog.

(function(document, $, Coral) {
var $doc = $(document);
$doc.on('foundation-contentloaded', function(e) {
$(window).adaptTo("foundation-registry").register("foundation.validation.validator", {
selector: "[data-validation=txt-validate]",
validate: function(el) {
var maxlength = parseInt(el.getAttribute("data-myapp-maxlength"), 10);

if (isNaN(maxlength)) {
return;
}

var length = el.value.length;

if (length > maxlength) {
return "The field needs to be maximum " + maxlength + " characters. It currently has a length of " + length + ".";
}
}
});
});
})(document, Granite.$, Coral);

 

some how this code is not working.

Please help me to resolve the issue.

 

@Arun_Patidar Capture.PNG

 

Thanks,

Sandeep.

1 Accepted Solution
BrianKasingli
Correct answer by
Community Advisor
Community Advisor

@Sandeep6,

It looks like you are trying to add a maxLength validation field to the granite UI components, known as Touch UI. You can achieve this without any custom code.

 

<textfield-example
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
    fieldLabel="Text Field Example"
    name="./example"
    maxlength="{Long}100"/>

Your custom validation code which using the Jquery validation library implementation looks incorrect, try this:
https://sourcedcode.com/blog/aem/touch-ui/aem-richtext-max-characters-length-validation

The code below adds a custom validation for the richText granite UI component:

;(function (window, $) {
    'use strict';
    /**
    * Rich-Text Editor Max Length Validation
    *
    * @class RichTextMaxLengthValidation
    * @classdesc registers a new validator to the foundation-registry service focused on the
    * cq/gui/components/authoring/dialog/richtext component.
    *
    * Usage: the attribute maxlength to the richtext component, example: maxlength="100"
    */
    var RichTextMaxLengthValidation= function () {
        var CONST = {
            TARGET_GRANITE_UI: '.coral-RichText-editable',
            ERROR_MESSAGE: 'Your text length is {0} but character limit is {1}!',
        };
        /**
         * Initializes the RichTextMaxLengthValidation
         */
        function init() {
            // register the validator which includes the validate algorithm
            $(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;
                }
            });
            // execute Jquery Validation onKeyUp
            $(document).on('keyup', CONST.TARGET_GRANITE_UI, function (e) {
                executeJqueryValidation($(this));
            });
        }
        /**
         * Execute foundation.validation.validator's validate algorithm.
         */
        function executeJqueryValidation(el) {
            var validationApi = el.adaptTo('foundation-validation');
            if (validationApi) {
                validationApi.checkValidity();
                validationApi.updateUI();
            }
        }
        return {
            init: init
        }
    }();
    RichTextMaxLengthValidation.init();
})(window, Granite.$);

 

 

 

View solution in original post

6 Replies
BrianKasingli
Correct answer by
Community Advisor
Community Advisor

@Sandeep6,

It looks like you are trying to add a maxLength validation field to the granite UI components, known as Touch UI. You can achieve this without any custom code.

 

<textfield-example
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
    fieldLabel="Text Field Example"
    name="./example"
    maxlength="{Long}100"/>

Your custom validation code which using the Jquery validation library implementation looks incorrect, try this:
https://sourcedcode.com/blog/aem/touch-ui/aem-richtext-max-characters-length-validation

The code below adds a custom validation for the richText granite UI component:

;(function (window, $) {
    'use strict';
    /**
    * Rich-Text Editor Max Length Validation
    *
    * @class RichTextMaxLengthValidation
    * @classdesc registers a new validator to the foundation-registry service focused on the
    * cq/gui/components/authoring/dialog/richtext component.
    *
    * Usage: the attribute maxlength to the richtext component, example: maxlength="100"
    */
    var RichTextMaxLengthValidation= function () {
        var CONST = {
            TARGET_GRANITE_UI: '.coral-RichText-editable',
            ERROR_MESSAGE: 'Your text length is {0} but character limit is {1}!',
        };
        /**
         * Initializes the RichTextMaxLengthValidation
         */
        function init() {
            // register the validator which includes the validate algorithm
            $(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;
                }
            });
            // execute Jquery Validation onKeyUp
            $(document).on('keyup', CONST.TARGET_GRANITE_UI, function (e) {
                executeJqueryValidation($(this));
            });
        }
        /**
         * Execute foundation.validation.validator's validate algorithm.
         */
        function executeJqueryValidation(el) {
            var validationApi = el.adaptTo('foundation-validation');
            if (validationApi) {
                validationApi.checkValidity();
                validationApi.updateUI();
            }
        }
        return {
            init: init
        }
    }();
    RichTextMaxLengthValidation.init();
})(window, Granite.$);

 

 

 

View solution in original post

Sandeep6
Level 5
Level 5

I know this, but I have to show alert after reaching limit.Please provide me some reference to achieve using js.

BrianKasingli
Community Advisor
Community Advisor

I just updated the comment from above, take a look. Also, take a look at the blog article.

Anudeep_Garnepudi
Community Advisor
Community Advisor

Hi @Sandeep6 

Add granite:class property to text field and update selector in js. 

property: granite:class (String) txt-validate

Validation JS:

$(window).adaptTo("foundation-registry").register("foundation.validation.validator", {
selector: ".txt-validate",
validate: function(el) {

...

}

This will work.

AG

Sandeep6
Level 5
Level 5
var maxlength = parseInt(el.getAttribute("data-myapp-maxlength"), 10); this value is not coming
Anudeep_Garnepudi
Community Advisor
Community Advisor
create a node under textfield with node name granite:data and set property to it myapp-maxlength(String) : 10