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

Avatar

Avatar
Validate 1
Level 1
aem-explorer
Level 1

Likes

2 likes

Total Posts

22 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Ignite 1
Give Back
Boost 1
View profile

Avatar
Validate 1
Level 1
aem-explorer
Level 1

Likes

2 likes

Total Posts

22 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Ignite 1
Give Back
Boost 1
View profile
aem-explorer
Level 1

31-07-2020

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?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

02-08-2020

@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

Answers (3)

Answers (3)

Avatar

Avatar
Give Back 5
Employee
vanegi
Employee

Likes

392 likes

Total Posts

378 posts

Correct reply

148 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 10
Give Back
Boost 50
View profile

Avatar
Give Back 5
Employee
vanegi
Employee

Likes

392 likes

Total Posts

378 posts

Correct reply

148 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 10
Give Back
Boost 50
View profile
vanegi
Employee

31-07-2020

Avatar

Avatar
Springboard
MVP
Shashi_Mulugu
MVP

Likes

232 likes

Total Posts

294 posts

Correct reply

67 solutions
Top badges earned
Springboard
Bedrock
Validate 1
Applaud 100
Establish
View profile

Avatar
Springboard
MVP
Shashi_Mulugu
MVP

Likes

232 likes

Total Posts

294 posts

Correct reply

67 solutions
Top badges earned
Springboard
Bedrock
Validate 1
Applaud 100
Establish
View profile
Shashi_Mulugu
MVP

31-07-2020

@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

Avatar
Affirm 50
MVP
Vaibhavi
MVP

Likes

216 likes

Total Posts

181 posts

Correct reply

61 solutions
Top badges earned
Affirm 50
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Affirm 50
MVP
Vaibhavi
MVP

Likes

216 likes

Total Posts

181 posts

Correct reply

61 solutions
Top badges earned
Affirm 50
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile
Vaibhavi
MVP

31-07-2020

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