Character count for a simple text field (not enforce character limit) | Community
Skip to main content
A
aem-explorer
Level 2
July 31, 2020
Solved

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

  • July 31, 2020
  • 4 replies
  • 4831 views

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?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by BrianKasingli

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

    4 replies

    Vaibhavi_J
    Vaibhavi_J
    Level 7
    July 31, 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-limits/qaq-p/366507

     

      A
      aem-explorerAuthor
      Level 2
      July 31, 2020
      Hi- that has character limits - I don't want to limit but provide a helper that shows word count that's it
      Shashi_Mulugu
      Community Advisor
      Shashi_MuluguCommunity Advisor
      Community Advisor
      August 1, 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-dialog-field-touch-ui/qaq-p/274114

        BrianKasingli
        Community Advisor and Adobe Champion
        BrianKasingliCommunity Advisor and Adobe ChampionAccepted solution
        Community Advisor and Adobe Champion
        August 2, 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:

          Terms & ConditionsAccessibility statement

          Loading footer...