how to use validation controls in modelpopupextender - asp.net

Question

I am using a ModalPopupExtender in a GridView. When the user clicks link button in the grid to update the row values, the modal popup opens. The user updates the values and click on the update button.
I have used validation controls in the modal popup, but the when the user click update button the form submits with out validating the controls.
I tried with ValidationGroup as it's mentioned in some forums but no luck. Can any one help how to fix this or any good examples.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
</div><asp:Button ID="btnShowPopup" runat="server" Text="Button" style="display:none"/><div >
<asp:GridView ID="GridView2" runat="server" BackColor="White"
BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="4"
AutoGenerateColumns="False" ForeColor="Black" Width="100%"
onrowcreated="GridView2_RowCreated" onrowdatabound="GridView2_RowDataBound">
<Columns>
<asp:BoundField DataField="ShortDescription" HeaderText="ShortDescription" ReadOnly="True" ><ItemStyle Width="32%" /></asp:BoundField>
<asp:BoundField DataField="Planned" HeaderText="Planned" ReadOnly="True" >
<ItemStyle Width="5%" HorizontalAlign="Right" /></asp:BoundField>
<asp:BoundField DataField="Actual" HeaderText="Actual" ReadOnly="True" >
<ItemStyle Width="5%" HorizontalAlign="Right" /></asp:BoundField>
<asp:BoundField DataField="Error" HeaderText="Error" ReadOnly="True" >
<ItemStyle Width="5%" HorizontalAlign="Right" /></asp:BoundField>
<asp:BoundField DataField="Volume" HeaderText="Vol" ReadOnly="True"
DataFormatString="{0:#%}" >
<ItemStyle Width="3%" HorizontalAlign="Right" /></asp:BoundField>
<asp:BoundField DataField="Mix" HeaderText="Mix" ReadOnly="True"
DataFormatString="{0:#%}" >
<ItemStyle Width="3%" HorizontalAlign="Right" /></asp:BoundField>
<asp:BoundField DataField="PMReason" HeaderText="Reason" ><ItemStyle Width="9%" /></asp:BoundField>
<asp:BoundField DataField="PMComment" HeaderText="Comment" ><ItemStyle Width="9%" /></asp:BoundField>
<asp:BoundField DataField="PMPlanned" HeaderText="Planned" >
<ItemStyle Width="5%" HorizontalAlign="Right" /></asp:BoundField>
<asp:BoundField DataField="PMActual" HeaderText="Actual" ReadOnly="True" >
<ItemStyle Width="5%" HorizontalAlign="Right" /></asp:BoundField>
<asp:BoundField DataField="PMError" HeaderText="Error" >
<ItemStyle Width="5%"
HorizontalAlign="Right" /></asp:BoundField>
<asp:BoundField DataField="PMVolume" HeaderText="Vol" ReadOnly="True"
DataFormatString="{0:#%}" >
<ItemStyle Width="3%" HorizontalAlign="Right" /></asp:BoundField>
<asp:BoundField DataField="PMMix" HeaderText="Mix" ReadOnly="True"
DataFormatString="{0:#%}" >
<ItemStyle Width="3%" HorizontalAlign="Right" /></asp:BoundField>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="btnSelect" runat="server" CausesValidation="false"
ImageUrl="~/Images/edit.png"
ImageAlign="AbsMiddle" Height="15px" Width="15px"
onclick="btnSelect_Click" />
</ItemTemplate>
<ItemStyle Width="3%" />
</asp:TemplateField>
<asp:BoundField DataField="ReportRowId" Visible="False" />
</Columns>
<FooterStyle BackColor="#CCCC99" ForeColor="Black" />
<PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
<SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
</asp:GridView>
</div>
<cc2:ModalPopupExtender ID="gv_ModalPopupExtender" runat="server"
TargetControlID="btnShowPopup"
PopupControlID="pnlModalPanel"
CancelControlID="btnCancel"
BackgroundCssClass="modalBackground"/>
<asp:Panel ID="pnlModalPanel" runat="server" Style="display: none;" BackColor="Red">
<table>
<tr>
<th colspan="2" align="center" style="color:White; font-size:larger"> POST MITIGATION </th>
</tr>
<tr>
<td>
<asp:Label ID="lblRowId" runat="server" Style="display: none;"></asp:Label> </td>
<td></td>
</tr>
<tr>
<td>
<asp:Label ID="lblDevice" runat="server"
ForeColor="White" Font-Bold="True">Device:</asp:Label> </td>
<td><asp:TextBox ID="txtDevice" runat="server" Width="150px" ReadOnly="true"></asp:TextBox></td>
</tr>
<tr>
<td>
<asp:Label ID="lblPlanned" runat="server"
ForeColor="White" Font-Bold="True">Planned:</asp:Label> </td>
<td><asp:TextBox ID="txtPlanned" runat="server" Width="150px" ReadOnly="true"></asp:TextBox></td>
</tr>
<tr>
<td>
<asp:Label ID="lblActual" runat="server"
ForeColor="White" Font-Bold="True">Actual:</asp:Label> </td>
<td><asp:TextBox ID="txtActual" runat="server" Width="150px"></asp:TextBox></td>
</tr>
<tr>
<td>
<asp:Label ID="lblError" runat="server"
ForeColor="White" Font-Bold="True">Error:</asp:Label> </td>
<td><asp:TextBox ID="txtError" runat="server" Width="150px" ReadOnly="true"></asp:TextBox></td>
</tr>
<tr>
<td>
<asp:Label ID="lblReason" runat="server"
ForeColor="White" Font-Bold="True">Reason:</asp:Label> </td>
<td>
<asp:DropDownList ID="ddlReason" runat="server" Width="150px" ValidationGroup="valReason">
<asp:ListItem>-- Select Reason --</asp:ListItem>
<asp:ListItem></asp:ListItem>
<asp:ListItem>Availability LT</asp:ListItem>
<asp:ListItem>Availability ST</asp:ListItem>
<asp:ListItem>Competitor Response</asp:ListItem>
<asp:ListItem>Credit</asp:ListItem>
<asp:ListItem>Plan Issue</asp:ListItem>
<asp:ListItem>Props Change</asp:ListItem>
<asp:ListItem>SCL Request</asp:ListItem>
<asp:ListItem>Launch Delay</asp:ListItem>
<asp:ListItem>Launch Forward</asp:ListItem>
<asp:ListItem>Phasing</asp:ListItem>
<asp:ListItem>Opportunity-Positive</asp:ListItem>
<asp:ListItem>Opportunity-Negative</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvReason" ValidationGroup="valReason" runat="server" Text="*" ErrorMessage="RequiredFieldValidator"
ControlToValidate="ddlReason" Display="Dynamic" ForeColor="White" InitialValue="-- Select Reason --"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td>
<asp:Label ID="lblComment" runat="server"
ForeColor="White" Font-Bold="True">Comment:</asp:Label> </td>
<td><asp:TextBox ID="txtComment" TextMode="MultiLine" Height="50px" runat="server" Width="150px"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Button ID="btnUpdate" runat="server" CausesValidation="true" ValidationGroup="valReason"
Text="Update Mitigation" onclick="btnUpdate_Click" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel"/></td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>

Answer 1

It worked when I removed the update button from the panel and replaced it with the new button.
But I am not sure why it didn't work before and why its working now. Its all the same code. Looks very strange to me.