Displaying Image in ASP.NET RequiredFieldValidator

Sometimes we need to display images along with the error message in the validators in ASP.net. There is an easy way to do it. Validators in ASP.NET have two properties “ErrorMessage” and “Text”. ErrorMessage is the property that is displayed when validation specified by the validator doesn’t pass i.e it is the error message related to an invalid condition. “Text” property is the Text to display in this control if invalid.

So following is the code that can be used to display an Image next to the text box that fails validation and an image with text in the validation summary control.

   1: <asp:TextBox ID="txtUID" runat="server" />

   2: <asp:RequiredFieldValidator id="txtUIDValidatorReq" runat="server" ControlToValidate="txtUID" 

        Display="Dynamic" Text="<img src='../images/icons/error_message.gif' />" 

        ErrorMessage="<img src='../images/icons/error_message.gif' /> Please enter a User ID">

      </asp:RequiredFieldValidator>

In the above code, There is a textbox for entering the UserID. A RequireFieldValidator txtUIDValidatorReq is associated with this textbox to check that userid is not empty. Following image shows the outcome of the above code if the user submits the page without entering the UserID.

For a detailed discussion of ASP.NET Validation Controls, you can refer links below..

ASP.NET Validators Unclouded By Paul Riley

Input Validation With ASP.NET by Harish Kamath Melonfire

 

Ha-P Validating 🙂