C# Guide - C#, Asp.Net, MVC, LINQ, jQuery and SharePoint Resources

Wednesday, July 4, 2012

Asp.Net jQuery set Textarea MaxLength

Unlike Textboxes, the <textarea> control doesn’t support the Max Length property; hence there is no direct way to impose maxlength for a textarea. However we can achieve this using jQuery.

Using jQuery we can impose Max Length property to a textarea, by tracking the keypress and blur events of the textarea, the keypress event makes sure that the user does not type more than the allowed number of characters in the textarea, the blur event takes care of values which are copied into the textarea, on blur, we will truncate the text such that it doesn’t exceed the max allowed length.

Here is a full example
<html xmlns="http://www.w3.org/1999/xhtml" >

<title>TextBox</title>

$(document).ready(function() {
$('#txtComment').keypress(function(evt) {

var maxLength = 50;

// Allow Delete & BackSpace keys

if (evt.keyCode == 8 || evt.keyCode == 46) return true;

// Allow Shift, Ctrl & Tab Key

if (evt.keyCode == 16 || evt.keyCode == 17 || evt.keyCode == 9) return true;

// Allow Arrow Keys

if (evt.keyCode == 37 || evt.keyCode == 38 || evt.keyCode == 39 || evt.keyCode == 40) return true;

// Check and restrict other Keys

if ($(this).val().length > maxLength) {

return false;

}

});

$('#txtComment').blur(function() {

var maxLength = 50;

var text = $(this).val();

if ($(this).val().length > maxLength) {

$(this).val(text.substr(0, maxLength));

}

});

</script>

</head>

<body>

</form>

</body>

</html>

The above script will validate the txtComment textarea, if you want the validation to be applied to all the textareas in the page then replace txtComment with the word textarea as follows

$('textarea').keypress(function(evt) {
$('textarea').blur(function() {

Related Posts
Asp.Net jQuery get Textbox Values
Asp.Net jQuery set Textbox Values
Asp.Net jQuery get Textbox Attributes
Asp.Net jQuery set Textbox Attributes
Asp.Net jQuery Apply style to all TextBoxes in the Page
Asp.Net jQuery Apply cssClass to all TextBoxes in the Page
Asp.Net jQuery change textbox style on focus
Asp.Net jQuery loop through Textboxes
Asp.Net jQuery Textbox set ReadOnly
Asp.Net jQuery Textbox Remove ReadOnly
Asp.Net jQuery Textbox Disable
Asp.Net jQuery Textbox Enable

Friday, March 30, 2012

Asp.Net - TextArea validation using RegularExpressionValidator

The Asp.Net TextArea control doesnot support the MaxLength property, though you set the MaxLength property, the TextArea control will not restrict the users to enter text within the set limit. The MaxLengh property works fine with the TextBox controls, but when it comes to TextArea controls (TextMode = MultiLine) the MaxLength property fails.

The RegularExpressionValidator, control can be used to validate the MaxLength property of the TextArea control. Her’s how this can be accomplished.

Add a TextBox control to your Asp.net form and set its TextMode property to MultiLine, then add a RegularExpressionValidator control with the regular expression to restrict the length of the text in the TextBox.

Here’s the code

<asp:TextBox id="txtProjectDescription"
runat="server"
CssClass="text"
MaxLength="2500"
Width="500px"
TextMode="MultiLine"
Rows="5">
asp:TextBox>

<asp:RegularExpressionValidator
ID="valtxtProjectDescription"
runat="server"
ControlToValidate="txtProjectDescription"
Display="None"
ErrorMessage="Project Description Should be less than 2500 Characters"
SetFocusOnError="True"
ValidationExpression="^([\S\s]{0,2500})$">
asp:RegularExpressionValidator>

Add the Save Button and the Validation Summery control

<asp:Button
ID="cmdSave"
runat="server"
Text="Save"
/>

<asp:ValidationSummary
ID="valSummary"
runat="server"
DisplayMode="List"
ShowMessageBox="True"
ShowSummary="False"
EnableClientScript="true"/>

Now build and run the project, enter a text with length more that 2500 characters in the TextArea. You should get an error message

Project Description Should be less than 2500 Characters

That's it, we have implemented the MaxLength property for a TextArea control in Asp.net