CharCounter Plugin

Displays a live character counter for fields that have a stringLength max configured. Updates on every keystroke.

Markup

Add a container element with the class vd-plugins-char-counter inside the field wrapper — the plugin writes the count into it:

<div class="field">
  <label>Bio</label>
  <input type="text" name="bio">
  <span class="vd-plugins-char-counter"></span>
</div>

Fields without a stringLength max validator are silently ignored.

Options

Option	Type	Default	Description
enabled	boolean	true	Enable or disable the plugin
container	string	".vd-plugins-char-counter"	CSS selector for the counter element inside the field wrapper
renderCount	(current, max) => string	"current / max"	Custom render function for the counter text
exceededClass	string	"vd-plugins-char-counter--exceeded"	CSS class added to the container when the count exceeds max
fields	string[]	all fields	Restrict counter to specific field names

Playground

Notes

• The counter element must be inside the same wrapper as the input (the plugin searches within the closest div, fieldset, or li ancestor).
• Works with <textarea> in addition to <input>.
• The exceededClass is purely visual — it does not affect validation. The stringLength validator handles the actual constraint.
• Use renderCount to localise the counter or switch to a "remaining" format: (current, max) => \${max - current} left``.