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

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

aem-explorer
Level 2
Level 2

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
BrianKasingli
Correct answer by
Community Advisor
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
Vaibhavi
Community Advisor
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...

 

aem-explorer
Level 2
Level 2
Hi- that has character limits - I don't want to limit but provide a helper that shows word count that's it
Shashi_Mulugu
Community Advisor
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...

BrianKasingli
Correct answer by
Community Advisor
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