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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

Avatar

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

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

Level 2
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