Introduction

Hi guys! Here I have tried a sample project of showing the validation error messages of a page in a Modal Popup. The modal popup stays in the Master Page whenever the content page requires to validate the page and show the error messages if there are any... they can accomplish this by calling a method of the master page.

I have used Ajax Control Toolkit version 3.0 for this sample.

Bits of Code

I have created a sample page that consists of few Text Boxes and ASP.NET Validators hooked into it. Every validator control has a property called ValidationGroup. This property is used to group a set of validations to happen at a particular action and to be shown at a common place.

<asp:TextBoxID="txtName"runat="server"Width="200px"></asp:TextBox><asp:RequiredFieldValidatorID="reqValName"runat="server"ErrorMessage="Name is required."ControlToValidate="txtName"Display="None"ValidationGroup="valGroup"EnableClientScript="false"></asp:RequiredFieldValidator>

The above code snippet shows a Required Field Validator that checks a name is required in the textbox. A couple of properties to note down are the ValidationGroup and EnableClientScript. The EnableClientScript property is set to false to make the validation happen only at the server side, not at the client. For all the validators, the ValidationGroup property is set to a common value "valGroup".

Here we are showing the validation error messages in summary so we have to set the Display="None" for all the validators.

Let's see the Master Page. It consists of a ValidationSummary control inside a panel that acts as the popup as shown below:

The important properties of ValidationSummary control are the ValidationGroup that has to be the same value that we have set for the validators, and the DisplayMode is set to displays all the error messages as a BulletList. The panel also has an Ok button for closing the error popup.

The next important control to note down is the ModalPopupControlExtender.

Points of Interest

The important thing to note down is that here, the validation is happening on the server side. So if you don't set the EnableClientScript property of validators to false, the validation happens at the client-side avoiding the popup from showing off.

The ValidationGroup of the validators and the ValidationSummary should have the same value. Even you can have a public property in the Master Page to set the ValidationGroup of the ValidationSummary from the content page as shown below:

The Error panel and the modal popup extender are wrapped inside an update panel. This is because if the content page has update panels and the button that calls the master page method is also inside the update panel, that makes the error messages not to be shown in the popup.

That's all the coding. Please free to post your comments and suggestions.

Share

About the Author

I'm a software developer from south tip of India. I spent most of the time in learning new technologies. I've a keen interest in client-side technologies especially JavaScript and admire it is the most beautiful language ever seen.

I like sharing my knowledge and written some non-popular articles. I believe in quality and standards but blames myself for lagging them.

Hi, I am using asp:RequiredFieldValidator inside a gridview, displaying the errormessage inside a modal popup using your modal code which works great. But I was wondering is it possible to remove duplicates? If a column is left blank on many rows the modal popup extends below the page and we cannot see ok button.

Removing the duplicate messages will be little tricky. Currently the modal popup don't have a fixed height being set so it's keep on growing.. you can avoid that by specifying a fixed height or max-height to the errorsPanel in master page along with overflow attributes as below,