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

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list
SOLVED

Text field content limits

Avatar

Level 1

I have a form with a few fields where my users will enter content.  It is my intent to limit the amount to text entered, but rather than add a character limit, I would like add some word count counter feature with the field.  Something like (150 of 300 words used) so the user knows they are approaching the word limit.  I would prefer a word limit over a character limit as I want to provide guidance rather than forced limitation.

Thanks

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @jmackesy 

 

You will have to use Granite validator to apply this check. I have  created a sample code for the same functionality. 

 

Follow these steps:

1. Create clientlibs with category "cq.authoring.dialog"

2. Add this js

 

 

(function ($) {
    'use strict';

    $(window).adaptTo("foundation-registry").register("foundation.validation.validator", {
	    selector: ".custom-word-limit",
	    validate: function(element) {
	        var elementValue = element.value;
            var wordLimit = element.dataset.wordLimit;
	        if(elementValue && wordLimit && elementValue.split(' ').filter(function(n) { return n != '' }).length > wordLimit){
				return "Word limit for the field is " + wordLimit;
	        }
	    }
	});

}(Granite.$));

 

 

3. Add granite:class property with value "custom-word-limit" to the textfield where you want to apply this word limit check like this:
Screenshot from 2020-06-16 16-13-48.png

4. Then add a "granite:data" node under the textfield of type nt:unstructured and add property word-limit = 100. Change this number to any number of which you want to apply the limit for this particular field like this
Screenshot from 2020-06-16 16-16-08.png

5. The author will get message like this

Screenshot from 2020-06-16 16-18-32.png

 

Try this and let me know if it works for you.

Thanks,

Nupur

3 Replies

Avatar

Level 9

You will probably have to use custom JavaScript to get the word count and display the appropriate message in the fields long description 

Avatar

Correct answer by
Community Advisor

Hi @jmackesy 

 

You will have to use Granite validator to apply this check. I have  created a sample code for the same functionality. 

 

Follow these steps:

1. Create clientlibs with category "cq.authoring.dialog"

2. Add this js

 

 

(function ($) {
    'use strict';

    $(window).adaptTo("foundation-registry").register("foundation.validation.validator", {
	    selector: ".custom-word-limit",
	    validate: function(element) {
	        var elementValue = element.value;
            var wordLimit = element.dataset.wordLimit;
	        if(elementValue && wordLimit && elementValue.split(' ').filter(function(n) { return n != '' }).length > wordLimit){
				return "Word limit for the field is " + wordLimit;
	        }
	    }
	});

}(Granite.$));

 

 

3. Add granite:class property with value "custom-word-limit" to the textfield where you want to apply this word limit check like this:
Screenshot from 2020-06-16 16-13-48.png

4. Then add a "granite:data" node under the textfield of type nt:unstructured and add property word-limit = 100. Change this number to any number of which you want to apply the limit for this particular field like this
Screenshot from 2020-06-16 16-16-08.png

5. The author will get message like this

Screenshot from 2020-06-16 16-18-32.png

 

Try this and let me know if it works for you.

Thanks,

Nupur