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:”
sgCounter – jQuery plugin which supports length control in form fields
Tagged on:                 

Leave a Reply

Your email address will not be published. Required fields are marked *

Social Widgets powered by AB-WebLog.com.