Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
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