sgCounter is a tiny jQuery plugin which allows live control of your text fields in form.
This plugin works with input text fields and textarea fields, which contains appropriate attributes set. It is also a visual friendly, because information about current length is displayed only for active field.
Features of plugin
– display of current number of characters entered in form field
– display information about minimal and maximal number of characters for the given field (optional)
– add css class for element when number of characters is incorrect (optional)
Examples
Example page will be available soon…
Download
You can download a package which contains normal and minified version of plugin. Download it now!
Usage
To use this library you just need to include jQuery to your website and then sgCounter plugin:
<script type="text/javascript">sgCounter.js</script>
Parameters for the input text or textarea fields:
– data-sgcounter-min – (optional) minimal amount of required characters in field, default 0
– data-sgcounter-max – (required) maximal amount of required characters in field
<input type="text" name="name" data-sgcounter-min="5" data-sgcounter-max="15" /> <textarea name="textField" data-sgcounter-max="100"></textarea>
The above examples will have:
– input: 5-15 characters allowed
– textarea: 0-100 characters allowed
Then you have to initialize the plugin by calling
$("input, textarea").sgCounter();
Calling library like above makes it runs with default settings.
Options
Option name | Default value | Description |
---|---|---|
showErrors | false | This options enable/disable adding error class to form element in case of error |
errorClass | error | The name of the class which is added to form element when the number of entered characters is not correct |
showRequiredNumber | true | This option activates/deactivates information about minimal and maximal number of characters required in field |
textCharactersRequired | Characters required: | Translation/own label for the string “Characters required:” |
textCharactersEntered | Entered: | Translation/own label for text “Entered:” |