Extending further from our previous example with the ASP.NET AJAX ModalPopupExtender, the lightbox may contain data input fields that require input validation.
When using validators with an ASP.NET AJAX ModalPopupExtender, there is one very important thing to keep in mind and that is the use of a ValidationGroup. The ValidationGroup ensures that only actions performed within lightbox only trigger the validators that are related to it and also ensures that they only fire when the relevant action is initiated.
See the source code below for an example of how the ValidationGroup is applied with the use of a RequiredFieldValidator:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ModalPopupExtendarWithPostback._Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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>
<style type="text/css">
.modalBackground
{
background-color: #CCCCFF;
filter: alpha(opacity=40);
opacity: 0.5;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div>
<asp:Button ID="Button1" runat="server" Text="Popup" OnClick="Button1_Click"></asp:Button>
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"
BackgroundCssClass="modalBackground" PopupControlID="Panel1">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server">
<fieldset>
<legend>Popup</legend>
<asp:UpdatePanel ID="UpdatePanel1" runat="Server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" ValidationGroup="Popup"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator"
ControlToValidate="TextBox1" Display="Dynamic" SetFocusOnError="true" ValidationGroup="Popup"></asp:RequiredFieldValidator>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Text="1" Value="1"></asp:ListItem>
<asp:ListItem Text="2" Value="2"></asp:ListItem>
<asp:ListItem Text="3" Value="3"></asp:ListItem>
<asp:ListItem Text="4" Value="4"></asp:ListItem>
<asp:ListItem Text="5" Value="5"></asp:ListItem>
</asp:DropDownList>
<asp:Label ID="Label1" runat="server"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="Button3" runat="server" Text="Save" OnClick="Button3_Click" ValidationGroup="Popup" />
<asp:Button ID="Button2" runat="server" Text="Close" OnClick="Button2_Click" />
</fieldset>
</asp:Panel>
</div>
</form>
</body>
</html>
Diary of a .NET Developer 
This is by far the best validation in an ajax Modalpopup extender published in internet.
THANKS A LOT
Comment by Dave — June 18, 2013 @ 7:11 am
Glad it helped. Definitely not a lot of information on this readily available on the Internet.
Comment by ip3lee — June 19, 2013 @ 9:32 pm
Thank you. Simple and easy to use.
Comment by Greg Davis — August 16, 2013 @ 8:18 am
really nice sir …
you can try another example of it here this is also very helpful…
http://www.alltechmantra.com/2013/12/how-to-use-pop-up-control-in-asp.net.html
Comment by Shubh — December 6, 2013 @ 8:26 pm
[…] https://diaryofadeveloper.wordpress.com/2011/12/25/asp-net-ajax-modalpopupextender-working-with-valid… […]
Pingback by [RESOLVED]Using Validation controls on a modal popup | ASP Questions & Answers — July 1, 2014 @ 11:01 pm
[…] https://diaryofadeveloper.wordpress.com/2011/12/25/asp-net-ajax-modalpopupextender-working-with-valid… […]
Pingback by [RESOLVED]Using Validation controls on a modal popup | ASP Web Form Data Control — July 3, 2014 @ 2:15 pm
[…] https://diaryofadeveloper.wordpress.com/2011/12/25/asp-net-ajax-modalpopupextender-working-with-valid… […]
Pingback by [RESOLVED]Using Validation controls on a modal popup | ASP.NET MVC — July 4, 2014 @ 5:03 pm
i tried it but ..its not working for me .. when i click Button3 its entering to the behind event without validiting .. can you help me please ?
Comment by Imad Alami — May 10, 2015 @ 2:06 pm
@Imad, have you set up your Validation Groups on the controls with the same name? If you could post the code, it may help with diagnosing the issue.
Comment by ip3lee — May 10, 2015 @ 9:44 pm
Thanks ip3lee for your repost ,
even when I try to copy paste some of your it example does not work ca :
Popup
it enter in btnValider-Click , without validating client
Comment by Imad Alami — May 11, 2015 @ 2:02 am
@Imad – I’ve dug up the original source code and put in on github. Head over to https://github.com/ip3lee/diaryofadeveloper/tree/master/ModalPopupExtenderWithValidation and download the source code. I’ve added all dependencies and have verified that it is all working. You should hopefully be able to use it to debug and identify the differences with your implementation. Hope this helps.
Comment by ip3lee — May 11, 2015 @ 10:17 pm
Popup
Comment by Imad Alami — May 11, 2015 @ 2:04 am
<%–
Popup
–%>
Comment by Imad Alami — May 11, 2015 @ 2:16 am
Bless you. This actually works!
Comment by Melanie Peterson — November 11, 2015 @ 6:02 am
Glad you were able to make use of it.
Comment by ip3lee — November 11, 2015 @ 8:37 am