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

[aem-explorer]

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?

[Vaibhavi_J]

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]

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

[Shashi_Mulugu]

@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...

[vanegi]

Please have a look at this blog:

http://aemlab.blogspot.com/2019/05/aem-touch-ui-component-dialog-field.html

Similar discussion in post https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-limit-character-cou...

Thanks!!

[BrianKasingli · Accepted solution]

@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: