Showing image when validation fails using validation control

As they say .NET is a big ocean and each day you come across something new. Even after working for six years on .NET every other day I learn something new. One such experience I would like to share with this blog. In this blog we will see how to show an image when there is a validation error.

Anyone who is a ASP.NET developer would have used validation control at some point or the other. So with this blog I would like to show a small technique whereby you can show an image next to a control whenever a validation fails using a validation control. The great thing about this approach is that, it is in-built into all the validation controls and to do this one need not write any server side code or client side code. Just placing an image tag in the “ErrorMessage” property of the validation control will do. Lets see the code.

Required Numeric: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"            ErrorMessage='<img src=images/error.gif />' Display="Dynamic"></asp:RequiredFieldValidator> <asp:Button ID="btnSubmit" runat="server" Text="Submit" CausesValidation="true" CommandName="Edit" /> <asp:Button ID="btnCancel" runat="server" Text="Cancel" CommandName="" CausesValidation="False"             OnClick="btnCancel_Click" />

If you see the above code I have placed a html image tag in the “ErrorMessage” property of the required field validator control. So when you click the submit button without entering any value in “TextBox1” an error image will pop next to the textbox. The screenshot is shown below.

In the above image you can see an image, adjacent to the textbox, which was assigned to the “ErrorMessage” property of the validation control. In the above screenshot one thing which is missing is the description about the error. Wouldn’t it be nice to have a description about the error alongside the image? To achieve just that just place the error message before the html image tag as shown below.

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"           ErrorMessage="Required.<img src=images/imagesCAJD7BX6.jpg />" Display="Dynamic"></asp:RequiredFieldValidator>

From the above you can notice that we have inserted “Required.” text before the image tag. The output of this is pasted below.

Now we have a message alongside the image which gives as the detail of what went wrong. Now all this is fine, but some others would like to make use of the validation summary and show the error messages in the validation summary and error images along side the controls. Hmm, is that tricky? Not at all, its very easy. Lets see how?

Error image along with validation summary control

To show error image alongside the control and validation message in validation summary you have to make some small adjustments in the above code. First thing, obviously, is to insert a validation summary control. Next, Place the image tag in between the starting and ending tags of the validation control. I know you will be little confused, lets clear your confusion with some code. Here is what you need to do.

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"            ErrorMessage="Required." Display="Dynamic"><img src=images/imagesCAJD7BX6.jpg /></asp:RequiredFieldValidator>

In the above code I have purposefully not included the validation summary control. You can find the whole code at the end of the blog. If you notice, we have placed the image tag in between the starting and ending tag of the required field validator. Also we have the error message in the “ErrorMessage” property. The output of the above code is pasted below.

One thing to note here is that you have to set the “Display” property of the validation control to “Dynamic”.  If you set the “Display” property to “None”, which we usually use with validation summary control, then the image will not be displayed. So its very important to set the “Display” property to “Dynamic'” for this to work. The whole code along with the validation summary is pasted below.

<asp:ValidationSummary ID="ValidationSummary1" runat="server" /> Required Numeric: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"            ErrorMessage="Required." Display="Dynamic"><img src=images/imagesCAJD7BX6.jpg /></asp:RequiredFieldValidator> <asp:Button ID="btnSubmit" runat="server" Text="Submit" CausesValidation="true" CommandName="Edit" /> <asp:Button ID="btnCancel" runat="server" Text="Cancel" CommandName="" CausesValidation="False"            OnClick="btnCancel_Click" />

Try to learn more

Sandeep