custom validation for coral text filed

Avatar

Avatar
Validate 1
Level 4
Sandeep6
Level 4

Likes

56 likes

Total Posts

66 posts

Correct reply

15 solutions
Top badges earned
Validate 1
Give Back
Boost 50
Boost 5
Boost 3
View profile

Avatar
Validate 1
Level 4
Sandeep6
Level 4

Likes

56 likes

Total Posts

66 posts

Correct reply

15 solutions
Top badges earned
Validate 1
Give Back
Boost 50
Boost 5
Boost 3
View profile
Sandeep6
Level 4

20-11-2020

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

20-11-2020

@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.$);

 

 

 

Answers (1)

Answers (1)

Avatar

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

275 likes

Total Posts

320 posts

Correct reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

275 likes

Total Posts

320 posts

Correct reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
Anudeep_Garnepudi
MVP

20-11-2020

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