Custom Validator and Validation Summary

• Download source - 19.5 KB

Introduction

This article shows how to build a custom validator and customize the error messages based on different conditions, as well as add a validation summary control and display error messages. This is very helpful if you have a lengthy form and you need to scroll down to hit a Submit button to validate the entire form. If the validation summary doesn't show the error message, the user could be confused. By default, the custom validator control doesn't render the error message to the validation summary control.

Background

I was working on a lengthy form that had various custom validators, as we had controls that needed to be validated differently based on what the user selected. After designing the form, I found that upon hitting the Submit button I had to scroll back up to check the error messages. So, I decided to design my own custom validator to display error messages based on selections.

Using the Code

As you can see in the picture above, I've created a sample project that holds the custom validator MyValidatorControl, which I'll be discussing soon. What this page does is:

• When you check the >20,000.00 check box and enter any invalid value, it shows the error message "* >20000 required"
• When a check box is unchecked and an invalid value is entered (i.e. a negative value or a non-numeric value), it shows the error message "* >0 and <20000"
• The error message is displayed in both the custom validation control and the validation summary

I created a web custom control and called it MyValidatorControl. I compiled it in the assembly MyValidatorControl.dll. The source code for MyValidatorControl.dll is available for download in MyValidatorControl.zip.

In the function EvaluateIsValid(), the ControltoValidate control (in this case, a text box) value is validated based on the check box selection. The property Text() returns a different message, as well.

Public Class MyValidator
    Inherits CustomValidator
    Private sGT20 As String
    Private sLT20 As String
    Private bChked As Boolean = False
    Property Greaterthan20Text() As String
        Get
            Return sGT20
        End Get
        Set(ByVal value As String)
            sGT20 = value
        End Set
    End Property
    Property Lessthan20Text() As String
        Get
            Return sLT20
        End Get
        Set(ByVal value As String)
            sLT20 = value
        End Set
    End Property
    Property isGT20Checked() As Boolean
        Get
            Return ViewState("bChked")
        End Get
        Set(ByVal value As Boolean)
            ViewState("bChked") = value
        End Set
    End Property
    <Bindable(True), Category("Appearance"), _
        DefaultValue(""), Localizable(True)>_
        Overrides Property Text() As String
        Get
            If isGT20Checked Then
                Return Greaterthan20Text
            Else
                Return Lessthan20Text
            End If
        End Get
        Set(ByVal Value As String)
            If isGT20Checked Then
                Greaterthan20Text = Value
            Else
                Lessthan20Text = Value
            End If
        End Set
    End Property
    Protected Overrides Function EvaluateIsValid() As Boolean
        If Not IsNumeric(Me.GetControlValidationValue(_
            Me.ControlToValidate)) Then
            Return False
        End If
        If isGT20Checked And CInt(_
            Me.GetControlValidationValue(_
            Me.ControlToValidate)) < 20000 Then
            Return False
        ElseIf Not isGT20Checked And CInt(_
            Me.GetControlValidationValue(Me.ControlToValidate)) < 0 Then
            Return False
        End If
        Return True
    End Function
End Class

Modify this as per your requirement and compile it into an assembly (DLL file). Create a website called "Project1" -- or you can call it anything you want -- and add the compiled assembly to the Project1 bin folder. You can copy and place the DLL in the bin folder or you can do it via the "Add reference" feature in Visual Studio.

Open Default.aspx in design mode and place a text box, RequiredFieldValidator, a check box, a ValidationSummary control and the custom validator MyValidator. The properties Greaterthan20Text and Lessthan20Text are preset for the control.

<% @ Register Assembly="MyValidatorControl" 
    Namespace="MyValidatorControl" TagPrefix="cc1" %>

<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="rfvalidator" 
                runat="server" ErrorMessage="* Required" 
                ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
            <cc1:MyValidator id="MyValidator1" runat="server" 
                ControlToValidate="TextBox1" 
                ErrorMessage="* > 0" 
                Greaterthan20Text="* >20000 required" 
                Lessthan20Text="* >0 required and <20000 " 
                ClientValidationFunction="ValidateGT20Function" 
                ValidateEmptyText="True">
                    * >0 required and <20000 
            </cc1:MyValidator>
            <br/>
            <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" 
                Text="> 20,000.00" Width="98px" />
            <br/>
            <br/>
            <asp:ValidationSummary ID="ValidationSummary1" runat="server" 
                ShowMessageBox="True" DisplayMode="List" 
                ShowSummary="false" />
            <asp:Button ID="Button1" runat="server" Text="Submit" />
        </div>
    </form>
</body>

The check box control property AutoPostBack should be set to true. The event CheckedChanged is handled in Default.aspx.vb.

Protected Sub CheckBox1_CheckedChanged(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles CheckBox1.CheckedChanged
    MyValidator1.isGT20Checked = CheckBox1.Checked
End Sub

The MyValidator control has a property called ClientValidationfunction that is set to ValidateGT20Function. This will be the client-side JavaScript function to check the value in the textbox and validate.

<script language="javascript" type="text/javascript">

function ValidateGT20Function(source, arguments)
{
    var val = 
        document.getElementById(document.getElementById(
        source.id).getAttribute("controltovalidate")).value;
    if (isNaN(val)) 
    {
        document.getElementById(source.id).setAttribute("errormessage",
            "* number required");
        arguments.IsValid = false;
    }
    else
    {
        if (document.getElementById("CheckBox1").getAttribute(
            "Checked") == true) 
        {
            if (val < 20000) 
            {
                document.getElementById(source.id).setAttribute(
                    "errormessage", "* >20000 required");
                arguments.IsValid = false;
            }
            else
            {
                arguments.IsValid = true;
            }
        }
        else
        {
            if (val < 0) 
            {
                document.getElementById(source.id).setAttribute(
                    "errormessage", "* >0 and <20000 required ");
                arguments.IsValid = false;
            } 
            else
            {
                arguments.IsValid = true;
            }
        }
    }
}

</script>

Points of Interest

Maybe there are other solutions out there, but I couldn't find any. Please send me the link to any other possible solutions. Happy programming!! And don't forget to have fun.

History

• 10 October, 2007 -- Original version posted

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here.