Daily Archive

You are currently browsing the daily archive for December 16th, 2007.

Multi Line Text Field Validation For Number of Allowed Characters

December 16, 2007 in Multi Line Text Field Validation For Number of Allowed | Tags: | Leave a comment

Objective: This article describes how to achieve server and client side validation for a multi line text field.

Background: Multi line text field validation is a very common procedure. It allows us to make sure that no more than the allowed number of characters are input or entered into a particular text field on our form. In this example the validation is done both on client and server side to assure accurateness and only a single text field is used to avoid too much confusing code on the page. I boiled the chicken fat away for you so you can study just what’s important.

Procedure: Follow instructions below to accomplish this task. This article uses Visual Web Developer Express 2008.

  1. Start by creating a new web form for your site and name it anything you want.
  2. Go into code view and replace the entire code with the following.

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    '.......................Serverside Textfield Validation Start....................
    'create protected subprocedure for textfield validation
    'if the length of text is longer than max characters allowed then
    'show error message
    'else allow to proceed
    'end if statement
    'end subprocedure
    Protected Sub CustomValidator1_ServerValidate(ByVal source As Object, ByVal args As System.Web.UI.WebControls.ServerValidateEventArgs)

        If tbxTextField.Text.Length > 10 Then
            args.IsValid = False
        Else
            args.IsValid = True
        End If

    End Sub
    '.......................Serverside Textfield Validation End....................

    '............................Submit Button Click Start.........................
    'when clicking the submit button
    'set the entered text of the textfield equal to the text of label1
    'end subprocedure
    Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "You typed: " & tbxTextField.Text
    End Sub
    '.............................Submit Button Click End..........................

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table cellpadding="2" cellspacing="0" style="width: 37%">
            <tr>
                <td style="width: 138px">

                    <!-- The label for the TextBox -->
                    <asp:Label
                    ID="lblTextField"
                    runat="server"
                    Text="Multiline Textfield:">
                    </asp:Label>

                </td>
                <td style="width: 262px">

                    <!-- The multiline TextBox -->
                    <asp:TextBox
                    ID="tbxTextField"
                    runat="server"
                    Height="76px"
                    TextMode="MultiLine"
                    Width="258px"
                    EnableViewState="False">
                    </asp:TextBox>

                </td>
                <td style="width: 11px">

                    <!-- The front end of the server side validation -->
                    <asp:CustomValidator
                    ID="CustomValidator1"
                    runat="server"
                    ControlToValidate="tbxTextField"
                    ErrorMessage="Exceeded max. 10 char."
                    OnServerValidate="CustomValidator1_ServerValidate">
                    *
                    </asp:CustomValidator>

                    <!-- Make sure the form is not submitted empty -->
                    <asp:RequiredFieldValidator
                    ID="RequiredFieldValidator1"
                    runat="server"
                    ControlToValidate="tbxTextField"
                    ErrorMessage="Please type a message!">
                    *
                    </asp:RequiredFieldValidator>

                    <!-- Makes sure the max. allowed chars. are not exceeded -->
                    <!-- Notice that it allows only 10 characters -->
                    <asp:RegularExpressionValidator
                    ID="RegularExpressionValidator1"
                    runat="server"
                    ControlToValidate="tbxTextField"
                    ErrorMessage="Exceeded max. 10 char."
                    ValidationExpression="^[\s\S]{1,10}$">
                    *
                    </asp:RegularExpressionValidator>

                </td>
            </tr>
            <tr>
                <td style="width: 138px">
                    &nbsp;
                </td>
                <td style="width: 262px">

                    <!-- The Submit Button -->
                    <asp:Button ID="btnSubmit"
                    runat="server"
                    Text="Submit For Validation"
                    Width="258px"
                    onclick="btnSubmit_Click" />

                </td>
                <td style="width: 11px">
                </td>
            </tr>
            <tr>
                <td style="width: 138px">
                </td>
                <td colspan="2">

                    <!-- The validation summary displayed at bottom -->
                    <asp:ValidationSummary
                    ID="ValidationSummary1"
                    runat="server" />

                </td>
            </tr>
            <tr>
                <td style="width: 138px">
                </td>
                <td colspan="2">

                    <!-- The label that displays the submitted text -->
                    <asp:Label ID="Label1"
                    runat="server"
                    EnableViewState="False"
                    Visible="True">
                    </asp:Label>

                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

  3. Save the page and give it a spin in your browser.
  4. That’s it! Enjoy.