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?
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:
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.