Categories:

Home / Free JavaScripts / Forms / Here

Cut & Paste jQuery MaxLength for INPUT and TEXTAREA fields

Credit: JavaScript Kit

Description: This useful form validation script lets you add a custom "maxlength" attribute to INPUT type="text" and TEXTAREA elements, so users are prevented from entering more characters into these fields than the designated number. Inspired by Twitter's input box, it can optionally show the number of characters remaining for a field as the user types while displaying this info in different colors depending on how close the user is to the limit.

Recall that HTML supports a maxlength attribute by default, although it only applies to INPUT elements, and furthermore, cannot show the user the number of characters remaining.

Example:

Enter your hobbies (<50 characters)

Enter your postal code (<6 characters)

Directions

Step 1: Add the following script to the <HEAD> section of your page:

Be sure to download maxlength.js (right click and select "Save As"), the external file referenced by the above code.

Step 2: Then, add the below sample form to your <BODY>:

As illustrated inside the form, you insert the following two attributes into a INPUT or TEXTAREA element to limit its size:

  • data-maxsize: Define this attribute with an integer value to set the maximum number of characters the field will accept.

  • data-output: If you wish to display in real time the # of characters remaining, define this attribute and set it to the ID of a blank container (ie: a DIV or SPAN) on the page that will show this info.

Dynamically applying "maxlength" to a form field

Instead of manually adding the aforementioned two attributes to your static form fields, you can also dynamically apply a "maxlength" to a field, such as one that's dynamically created. Simply call the function:

setformfieldsize($field, maxsize, outputfieldid)

Where the following 3 parameters are accepted:

  • $field: Reference to the form field(s) you wish to apply "maxlength" to, as jQuery objects! So for example, to reference the form field with ID "myname", the value to enter would be jQuery('#myname'). See the jQuery Documentation page for more info.

  • maxsize: An integer value specifying the maximum number of characters the field should accept.

  • outputfieldid: If you wish to display in real time the # of characters remaining, enter the ID of a blank container (ie: a DIV or SPAN) on the page that should show this info.

Here's an example:

jQuery(document).ready(function($){ //fire on DOM ready
 setformfieldsize(jQuery('#comment'), 50, 'charsremain')
})

JavaScript Tools:
Site Info

CopyRight 1998-2012 JavaScript Kit. NO PART may be reproduced without author's permission.