Set Max Length And Display Character Count

In this guide, we will explain how to set the max length for a Text field and display the character count.

Drag and drop a Text field and a JavaScript field.

Click the pencil icon of the Text field and then click “Add Custom Attribute”.

Add this validation rule to set a max length for Text field input.

input | data-parsley-length | [0, 10]

Click the pencil Icon of the JavaScript field and paste the code.

Use this code:

var text_field = $("#component-9066-f3ee-73b5 input");
var character_count = $("<span></span>").attr("id", "character_count");
text_field.after(character_count);
text_field.on("input", function () {
  var max_length = 10; // Set the maximum length here
  var remaining_chars = max_length - text_field.val().length;
  character_count.text(remaining_chars + " characters remaining");
});

Note: Please update the field ID according to your form.

Optional: You can add this line at the last of the JavaScript if you do not want to add the custom attribute validation rule separately.

text_field.data("parsley-length", "[0, 10]"); // Set the data-parsley-length attribute

Try the form. It will enable displaying characters count and set a max length for the Text field.

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂