Customizing Error Message in ValidationSummary

Posted Date: 15 Oct 2009	Resource Type: Code Snippets	Category: ASP.NET WebForms
Author: Ramesh S	Member Level: Gold
Rating:	Points: 15

Customizing Error Message in ValidationSummary

Introduction

We will see how to customize ValidationSummary control to display error messages as hyper links. Note that the error messages thrown by validation controls such as RequiredFieldValidator, CustomValidation, RangeValidator etc. can be displayed as plain text in the ValidationSummary control by default.

ValidationSummary

The ValidationSummary control is used to display all validation error messages thrown by ASP.NET validation controls on a web page or in message box. The error message can be displayed on the web page by setting the ShowSummary property to true. The style of the message display can be controlled by DisplayMode property.

Customization

Now we will customize the ValidationSummary control by displaying the error message as hyperlinks instead of plain text. Clicking a hyperlink will take the user to the input control for which the error message thrown. This will help the end user to easily identify the input control for which the validation fails and re-enter the input value. Also it provides a simple navigation if web page has numerous input controls. I have also attached the code snippet as zip file. Use this attachement to have a complete working code sample.

How it works

The following logic has been used in this code snippet.

1. The ErrorMessage property of the RequireFieldValidtor control has been set to an HTML anchor <a> object with the error message. For Example,
ErrorMessage="<a href='javascript:setFocus("txtEmployeeCode")'>Employee Code must be entered</a>">*</asp:RequiredFieldValidator>

2. The same technique has been used in CustomValidation at the server side validation in C#.

3. The setFocus method written in JavaScript is used to move focus to the input control.

Code Snippet – aspx


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DemoPage29.aspx.cs" Inherits="DemoPage29" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript" language="javascript">
        function setFocus(objControl)         
        {
            document.getElementById(objControl).focus();
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table width="100%">
            <tr>
                <td>
                </td>
                <td>
                     
                    <asp:ValidationSummary ID="ValidationSummary1" runat="server" 
                        HeaderText="Customizing Validation Summary" DisplayMode="List" 
                        ShowMessageBox="True" />
                </td>
            </tr>
            <tr>
                <td>
                    Employee Code
                </td>
                <td>
                    <asp:TextBox ID="txtEmployeeCode" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="rfvEmploeeCode" runat="server" ControlToValidate="txtEmployeeCode"
                        ErrorMessage="<a href='javascript:setFocus("txtEmployeeCode")'>Employee Code must be entered</a>">*</asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>
                     Name
                </td>
                <td>
                    <asp:TextBox ID="txtEname" runat="server" Width="241px"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="rfvEname" runat="server" ControlToValidate="txtEname"
                        ErrorMessage="<a href='javascript:setFocus("txtEname")'>Employee Code must be entered</a>">*</asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>
                    DOB
                </td>
                <td>
                    <asp:TextBox ID="txtDOB" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="rfvDOB" runat="server" ControlToValidate="txtEname"
                        ErrorMessage="<a href='javascript:setFocus("txtDOB")'>Date of birth must be entered</a>">*</asp:RequiredFieldValidator>
                    <asp:CustomValidator ID="cvDOB" runat="server" Font-Strikeout="False">*</asp:CustomValidator>
                </td>
            </tr>
            <tr>
                <td>
                     
                </td>
                <td>
                    <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Code Snippet – C#


using System;

public partial class DemoPage29 : System.Web.UI.Page
{
    protected void btnSave_Click(object sender, EventArgs e)
    {
        DateTime dt = DateTime.Parse(txtDOB.Text);
        if (dt.Year >= 1985)
        {
            cvDOB.ErrorMessage = "<a href='javascript:setFocus(\"txtDOB\")'>Year must be greater than or equal to 1985</a>";
            cvDOB.IsValid = false;
            return;
        }
    }
}

Attachments

Customize ValidationSummary (33985-15437-CustomizeValidSummary.zip)

Responses

No responses found. Be the first to respond and make money from revenue sharing program.

Feedbacks

Popular Tags

What are tags ?

Search Tags

Customizing Error Message in ValidationSummary .

Post Feedback

This is a strictly moderated forum. Only approved messages will appear in the site. Please use 'Spell Check' in Google toolbar before you submit.
You must Sign In to post a response.

	Next Resource: Confirmation dilog
	Previous Resource: Enumerations Diff Between VB.NET & C#.NET
	Return to Discussion Resource Index
	Post New Resource
	Category: ASP.NET WebForms

Post resources and earn money!

More Resources