Blog author:
Brij | Posted on: 2/27/2011 | Category:
ASP.NET Blogs | Views: 6195 | Status:
[Member] [Microsoft_MVP] |
Points: 75
|
Alert Moderator
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 diffference between a textbox in single line and multiline mode!!!
Let's see, how it gets rendered as html. Lets have a look.
Now 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 check the length of input string and if
exceed 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 charachters." ControlToValidate="tb"
SetFocusOnError="true" ClientValidationFunction="CheckMaxLength" ></asp:CustomValidator>
//Client Validator function
function CheckMaxLength(sender, args) {
if (args.Value.trim().length >= 10) {
args.IsValid = false;
}
}
But there is another smart way is there, to acheive 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 Cheers,
Brij
Microsoft MVP - ASP.NET/IIS
http://brijbhushan.net
Found interesting? Add this to: