Click here to Skip to main content
Click here to Skip to main content

Why MaxLength property of a textbox with multiline mode doesn’t work? A Solution

, 17 Feb 2011
Rate this:
Please Sign up or sign in to vote.
Why MaxLength property of a textbox with multiline mode doesn’t work? A Solution

Many developers set the MaxLength property of a Textbox and it works fine until the Textbox is not in multiline mode, which is by default behavior of a Textbox.

So what is the basic difference between a textbox in single line and multiline mode!!!

Let’s see, how it gets rendered as HTML. Let's have a look.

Textbox with SingleLine mode

Textbox with SingleLine mode

Textbox with MultiLine mode

Textbox with MultiLine mode

As you can see, when a Textbox is in SingleLine mode, it gets rendered as a input type text and when it is in MultiLine mode, it gets rendered as a textarea. As we know, MaxLength property works only for input type.

So what is the solution? We need to have a custom solution for this.

Let’s try some solution.

One thing we can do, we can attach a function on onkeypress event to the textbox, which first checks the length of input string and if exceeds with limit, it just returns else allow to enter any input. In the below example, I have used the maximum length as 10.

<asp:TextBox ID="tb" runat="server" TextMode="MultiLine" 
	onkeypress="return CheckLength();"></asp:TextBox>

//And the javascript code is
function CheckLength() {
            var textbox = document.getElementById("<%=tb.ClientID%>").value;
            if (textbox.trim().length >= 10) {
                return false;
            }
            else {
                return true;
            }
        }

This works fine until a user doesn’t paste a text which is greater than the max length that is given (here 10). So there is no simple way to stop this. To overcome this problem, one should use one of the ASP.NET validators.

One can go for the custom validator, and provide a JavaScript function, which checks the length of the text and if exceeds the maxlength then show an error. Let’s see the code below:

<asp:TextBox ID="tb" runat="server" TextMode="MultiLine" ></asp:TextBox>
//Validator
        <asp:CustomValidator ID="CustomValidator1" runat="server" 
	ErrorMessage="Please enter maximum 10 characters." ControlToValidate="tb"
         SetFocusOnError="true" ClientValidationFunction="CheckMaxLength" >
	</asp:CustomValidator>

//Client Validator function
function CheckMaxLength(sender, args) {
            if (args.Value.trim().length >

But there is another smart way to achieve this. We can also use Regular expression validator for this, which will check the count of the entered character and will throw an error if it exceeds. Here we would not require to write a JavaScript function. We need to have a regular expression that will work. Let’s see the code:

<asp:TextBox ID="tb" runat="server" TextMode="MultiLine" ></asp:TextBox>

//Regular Expression validator
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" 
	runat="server" ControlToValidate="tb" 
	ErrorMessage="Please enter maximum 10 charachters."
 SetFocusOnError="true" ValidationExpression="^[a-zA-Z.]{0,10}$">
	</asp:RegularExpressionValidator>

Here we don’t require to write a JavaScript function. I have used a regular expression ^[a-zA-Z.]{0,10}$, which allows all the characters with length 0 to 10.

Hope you all must have enjoyed.

Thanks,

Brij


License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Brij
Software Developer (Senior)
India India
Brij is a 3-times Microsoft MVP in ASP.NET/IIS Category and a passionate .NET developer. More than 6 years of experience in IT field, currently serving a MNC as a Tech Lead/Architect.
 
He is a very passionate .NET developer and have expertise over Web technologies like ASP.NET 2.0/3.5/4.0, jQuery, JSON, Javascript, IIS and related technologies. He is also a Exchange Server (EWS) Specialist. He has great experience in design patterns and N-Tier Architecture.
 
He is also certified as Microsoft Certified Technologies Specialist-ASP.NET and Microsoft Certified Technologies Specialist-WCF in .NET 4.0. He has also received several awards at various forums and his various articles got listed as "Article of the day" at ASP.NET Microsoft Official Website www.asp.net.
 
He has done MCA from NIT Durgapur and completed his graduation from Lucknow University.
 
Learning new technologies and sharing knowledge excites him most. Blogging, solving problems at various forums, helping people, keeps him busy entire day.


Visit his Blog: Brij's arena of .NET
 
Area of Expertise :
C#, ASP.NET 2.0,3.5,4.0, AJAX, JQuery, JSON, XML, XSLT, ADO.Net, WCF, Active Directory, Exchange Server 2007 (EWS), Java script, Web Services ,Win services, DotnetNuke, WSS 3.0,Sharepoint Designer, SQL Server 2000/2005/2008
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 PinmemberSk. Tajbir6-Mar-13 23:17 
GeneralMy vote of 5 PinmvpKunal_Chowdhury26-Feb-11 7:50 
GeneralMy vote of 5 Pinmemberlovejun20-Feb-11 17:48 
good waring
GeneralRe: My vote of 5 PinmvpBrij21-Feb-11 8:23 
GeneralRe: My vote of 5 Pinmemberlovejun21-Feb-11 17:57 
GeneralMy vote of 5 PinmemberRaviRanjankr18-Feb-11 2:00 
GeneralRe: My vote of 5 PinmvpBrij18-Feb-11 6:22 
GeneralMy vote of 5 PinmemberSudeep35017-Feb-11 19:21 
GeneralRe: My vote of 5 PinmvpBrij18-Feb-11 6:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 17 Feb 2011
Article Copyright 2011 by Brij
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid