Part 1: Showing ASP.NET Validation Summary in a Custom Dialog (Client-Side)

Scenario:

There are times when you want to display validation or error message(s) to the user in a pop-up dialog. These messages could be coming from client-side or server-side. In this multi-part series I am going to provide you with the code to accomplish this. Yes, I am not going to explain building from scratch but provided you with working sample, which you can integrate in your web site/application.

Background:

ASP.NET validation controls are great way to let users know about the constraints on your input controls. Using these controls you can display error message next to the control telling users what needs to be corrected.  You can check more about those controls here (msdn) or here (quickstarts).

One of the controls is ValidationSummary control. As the name suggests, it displays the summary of the validation i.e. it aggregates and displays the error messages for each failed validation. You can place this control anywhere on the page and not necessarily right next to any control. But if you are running out of space on the page, it has a property – ShowMessageBox – which displays the summary of error messages in a pop-up dialog. But unfortunately this message-box has a default look. There is no way to customize the UI for this dialog. Now if you are like me who want a customized UI, then ValidationSummary is not the control for you and so you need to keep reading.

So instead of using ValidationSummary, I have come up with a script that uses jQuery UI Dialog to display the error message summary.

Road Map:

Here is what I think will be the series like:

  1. Part-1: Client-side Validation Summary
  2. Part-2: Include Messages from Server-Side without ASP.NET AJAX
  3. Part-3: Include Messages from Server-Side using ASP.NET AJAX

Requirements:

  • ASP.NET Validation Controls: You must be using ASP.NET Validation Controls. So you will need know at least how to use those controls.
  • jQuery UI Dialog: We are going to use jQuery and jQuery UI Dialog. You don’t need to know how they work as I have taken care of it. But you will need those libraries. As I will discuss below, you can download them and include them in your project or you can use CDN, as in the sample provided.
  • Styles: I have used jQuery UI smoothness theme  but also have some customization. You are free to use your own UI.

Download Available: Click here to download

The download provided includes the main files you will need to implement this within your project and also sample files that demonstrates the usage of these scripts. Feel free to post comment / ask me if you find any difficulty. I am going to explain later what the files are in the sample project. I would highly recommend to download the sample first and keep it open while reading further.

What’s in this part?

The sample I am providing in this part includes Client-side validation scenario only. Any failed validation detected on the client-side will be displayed in the error dialog. Here is the screen-shot of what it will look like when validation fails.

RequiredFieldValidator Messages:

esClient_1

RangeValidator Message for Age:

esClient_12

Hope this will give you an idea what I was talking for so long. Yes, the messages are coming from asp.net validator controls and the dialog you are looking at is jQuery UI Dialog.

Project Structure and Files:

Let me explain what’s included in the sample download. Here is the current project structure:

projectStructure

1: Root of the site

  • web.config: It has nothing special. Since this project was developed using VWD Express 2010 + .NET 4.0, it has targetFramework set in there. The key point to note is the  <pages theme=”Default”>. Yes, I need a skin file under the App_Themes/Default. So I have added that.

  • Site.master: That is the masterpage which my pages are using. Check the <head> tag of the page. I have used jquery’s CDN to reference core jquery library (version 1.4.4). Also I have used microsoft’s CDN to reference the jquery UI (v- 1.8.5) library. In addition to those there is dialogScript.js and sitestyles.css references added. Rest is all normal UI. Note: If you are not using masterpage then all these file references should go in the head section of your page.

  • ESDialog_ClientSide_1.aspx: This is the sample file that shows how to setup the UI for our error message dialog. I will showing that and explain it in a bit.
  • App_Themes and scripts folders: Read below:

2: App_Themes folder: This is the custom asp.net folder that has one theme called Default.

  • Default: That is the asp.net Theme I added. It has images folder that has images which are required by jquery UI Smoothness theme.

  • jquery-ui-1.8.7.custom.css : This is the file that came with the downloaded for the smootheness theme(http://jqueryui.com/download) which is need for the dialog’s look and feel. I simply added this file and the images folder that came with the dialog. So if you want to use different theme you simply need to add a your new file and images.

  • images folder: As mentioned above is comes as a part of UI dialog with smoothness theme download.

  • sitestyles.css: This file has styles for the master page as well as some customization to dialog.

  • SkinFile.skin: This is for any site-wide skinning required. I need that to make the validator text to appear red because by default in ASP.NET 4.0 the text color is black.

3: Scripts folder: It includes the javascript files.

  • dialogScript.js: This is the core file that does all the magic of aggregating or removing the messages, showing/hiding of the error dialog and a lot.

  • future.js: This is not used but I just lying in there and has some code for future use i.e. server-side messages part

  • jquery-1.4.4.js : This is the core-jquery library. Since we are referencing it via cdn we are not using it. I have added it just as a reference purpose. In case if you don’t want to use CDN, you can simply add reference to this file in your masterpage’s <head>.

  • jquery-ui-1.8.7.custom.min.js: Like jquery-core this is for reference purpose only and not used in the sample since we are referencing it via microsoft’s CDN.

I think that’s all for what is in the project.

 

Setup:

Here are some basic steps that might help you integrate my solution within your project:

1: dialogScript.js: Add dialogScript.js in your project and add the reference to it either in your MasterPage or the Page’s <head> section.

2: jquery core: Download the latest core jQuery library (or use what I have provided in the sample) and add there reference to it Or You can use CDN reference as in my sample.

3: JqueryUI: Add reference to jqueryUI library as shown in sample via CDN or you can use the one I have in the scripts folder.

4: Themes: Copy my themes folder to App_themes folder. If you have already have a theme and would like to use it then add the contents of the Default them to your existing theme.

5: The Page: On the page where you want to use this dialog summary, the below divs with exact same ids is mandatory:


<div id="error-messages">
     <div id="message-content" />
 </div>

 

Yes, that is all the markup you need on your page for our dialog script to work.

 

Notes:

1: I am not using any AJAX i.e. ScriptManager / UpdatePanel in the sample. I believe it should work with little bit of tweaking. So you can try it. I have kept it for next part where I will be using ASP.NET Ajax.

2: You can customize the dialog behavior in several ways. You can do it in dialogScript.js and also the look of the dialog using different styles. Let me know if you need any help.

3: This script was developed considering my custom use scenario, so there are chances it might not work in certain cases. If you find some let me know, I will try to adjust the script in possible.

Conclusion:

Hope this is helpful. Sorry, I haven’t provided much explanation of the code, but feel free to ask if something doesn’t work or doesn’t make sense or have any difficulty setting up this guy.

Sample Download

Credits and Resources:

Here are some resources which helped me put this sample together.

Thanks for staying along….

Updated (04/15/2011): Added CustomValidator to sample.

6 Comments

  • hey i'm new to Asp.net and i'm trying to implement this , but does not work at all. I already put all the files in my project, the div tags &nbsp;and the link reference files you told, am i missing something?!

  • Carlos,
    Are you getting any errors? Did the sample download worked for you?

  • I noticed that when an .aspx page is in a folder (ie not on the root directory) the dialog box does not show. How can I fix it?

  • @Oboro,
    One thing I can think of is the js file reference. Are you getting any javascript errors? Check the path to the js files is correct.

  • Thanks this works perfectly. &nbsp;One question though, I am using customvalidator controls that use javascript for client side validation. &nbsp;The dialog correctly displays the error message for each customvalidator, but the text for the customvalidator does not display. &nbsp;Is this by design? &nbsp;Not a problem if it is.

  • @Tmack,
    It should work. I have update the sample page to reflect the use of CustomValidator. Post your question and CustomValidation code if the above doesn't work.

Comments have been disabled for this content.