In this article I will explain with an example, how to implement maximum Length validation for TextBox using JavaScript and jQuery.
HTML TextBox does have MaxLength property but it does not provide features such as Character Count i.e. displaying the user number of character left.
Thus using the ASPSnippets MaxLength jQuery plugin, one can enforce character limit validation and optionally display the Character Count.
Understanding the ASPSnippets MaxLength jQuery plugin
The ASPSnippets MaxLength jQuery has the following required and optional parameters:
1. MaxLength(required) – Integer value indicating the Maximum character length limit.
2. CharacterCountControl(optional) – By default the plugin will display character count below the TextArea, but user has option to explicitly specify the Character Count Control.
Note: The character count control can only be a HTML SPAN or DIV element.
3. DisplayCharacterCount(optional) – Default true. If set to false the Character counting will be disabled.
HTML Markup
The HTML Markup consists of three TextBoxes for which the Maximum Length validation will be implemented.
There is also an HTML DIV for displaying the Character Count for the second TextBox.
<input type="text" id="TextBox1" style="width: 300px" value = "Mudassar Khan" />
<br />
<br />
<div id="counter" style="color:red;font-weight:bold"></div>
<input type="text" id="TextBox2" style="width: 300px" />
<br />
<br />
<input type="text" id="TextBox3" style="width: 300px" />
Implementing Maximum Length validation for TextBox using JavaScript and jQuery
Inside the jQuery document ready event handler, the ASPSnippets MaxLength jQuery plugin is applied to all the three HTML TextBoxes with three different configurations.
First TextBox – Default configuration. Maximum Length validation will be performed and Character count will be displayed.
Second TextBox – Maximum Length validation will be performed and Character Count will be displayed in a HTML DIV.
Third TextBox – Only Maximum Length validation will be performed.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="MaxLength.min.js"></script>
<script type="text/javascript">
$(function () {
//Normal Configuration.
$("#TextBox1").MaxLength({ MaxLength: 10 });
//Specifying the Character Count control explicitly.
$("#TextBox2").MaxLength(
{
MaxLength: 15,
CharacterCountControl: $('#counter')
});
//Disable Character Count.
$("#TextBox3").MaxLength(
{
MaxLength: 20,
DisplayCharacterCount: false
});
});
</script>
Screenshot
![Maximum Length validation for TextBox using JavaScript and jQuery]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
