Character Count & Maximum Length Validation using JavaScript

In this post, let us discuss about displaying Character count and an alert when character count matches with maximum no of allowed characters.

First, add af:inputtext component to page surrounded with af:panelbox component.
Inside af:inputtext component, add af:clientListener & af:clientAttribute to trigger java script with required attributes. Add af:outputText component inside toolbar facet of af:panelbox to display Character count.

            <af:panelBox text="Character Count" id="pb1" clientComponent="true" showDisclosure="false"
                             partialTriggers="it1">
                    <f:facet name="toolbar">
                        <af:outputText id="CharCount" clientComponent="true" value=""
                                       inlineStyle="font-weight:normal;"/>
                    </f:facet>
                    <af:inputText label="Enter Name" id="it1" maximumLength="8" clientComponent="true" required="true"
                                  rows="1" columns="10">
                        <af:clientListener method="charCount" type="keyUp"/>
                        <af:clientAttribute name="Warning" value="You have reached maximum no of characters!!!"/>
                    </af:inputText>
                </af:panelBox>

Next add java script as shown below to count no of characters and display an alert when it reached to maximum no of characters.

            <af:resource type="javascript">
              function charCount(evt) {
                  var sourceId = evt.getSource().getClientId();
                  var source = evt.getSource();
                  var textfield = evt.getCurrentTarget();
                  var textfield_current_content = textfield.getSubmittedValue();
                  var textfield_current_content_length = textfield_current_content.length;
                  var maxLength = textfield.getMaximumLength();
                  var lengthdiff = maxLength - textfield_current_content_length - 1;
                  if (lengthdiff &gt;= 0) {
                     if(sourceId.indexOf("it1") != -1) {                  
                      var counter = source.findComponent("CharCount");
                     }
                   counter_value = counter.getValue();
                   counter.setValue(textfield_current_content_length + " characters (out of " + maxLength + ")");
                      showAlert = true;
                  }
                  else {
                     if(sourceId.indexOf("it1") != -1) {
                        var counter = source.findComponent("CharCount");
                        counter.setValue(textfield_current_content_length + " characters (out of " + maxLength + ")");
                        var warning = evt.getSource().getProperty('Warning');
                       }
                     if (showAlert == true) {
                        alert(warning);
                        showAlert = false;
                       }
                  }
              }
            </af:resource>

Now run the page and test the logic. An alert will be displayed when Character count in Input text field reaches to Maximum length.

Notes: 

• Given java script contains some additional logic(if condition), which is not required when you have only one af:inputtext field. You can reuse same java script by adding additional if condtions based on af:inputtext ID, when you need same logic for few more af:inputtext fields.
• af:clientAttribute -- If you want to display alert message from property bundle(i18n), just replace hard coded value with reference to key value in property bundle.

          <af:clientAttribute name="Warning" value="#{viewcontrollerBundle.WARNING_EN}"/>