Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Character count for a simple text field (not enforce character limit)

Avatar

Level 3

I would like the dialog textfield to show character count right below the text field and possibly change the color after certain count. Is there a pre-built configuration for this?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@aem-explorer 

You can register a new validator to the foundation-registry (the foundation-registry is used in the Granite UI framework) via JavaScript utilising the Jquery Validation Library.

To register a new validator is simple and looks like this:

 

$(window).adaptTo('foundation-registry').register('foundation.validation.validator', {
    selector: '.coral3-Textfield',
    validate: function (el) {
        var $textField = $(el);
        // validation code
    }
});

 

Check out this article on how to enable AEM RichText Max Characters Validation, where you can see how the validation logic is implemented. https://sourcedcode.com/blog/aem/touch-ui/aem-richtext-max-characters-length-validation

Result:

max-characters-limit-example.png

View solution in original post

5 Replies

Avatar

Community Advisor

Hi @aem-explorer , 

You can achieve this using granite validator. 

Please check the below thread which has details on the same. 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-forms/text-field-content-l...

 

Avatar

Level 3
Hi- that has character limits - I don't want to limit but provide a helper that shows word count that's it

Avatar

Community Advisor

@aem-explorer you can write a dialog field validator and put your logic of displaying message such as 20/100, 50/100 characters entered messages.

Please refer to below community post, in that they refer to regex instead you can get character count and display message.

 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/custom-validation-for-dial...

Avatar

Correct answer by
Community Advisor

@aem-explorer 

You can register a new validator to the foundation-registry (the foundation-registry is used in the Granite UI framework) via JavaScript utilising the Jquery Validation Library.

To register a new validator is simple and looks like this:

 

$(window).adaptTo('foundation-registry').register('foundation.validation.validator', {
    selector: '.coral3-Textfield',
    validate: function (el) {
        var $textField = $(el);
        // validation code
    }
});

 

Check out this article on how to enable AEM RichText Max Characters Validation, where you can see how the validation logic is implemented. https://sourcedcode.com/blog/aem/touch-ui/aem-richtext-max-characters-length-validation

Result:

max-characters-limit-example.png