AjaxToolkit:ValidatorCalloutExtender not working

Bilawal Niaz

Jun 13 2016 1:36 PM

292

ValidatorCalloutExtender not working inside the updatepanel why?

any one resolve my issue?

the code is :

<%@ Page Title="" Language="C#" MasterPageFile="~/CRMS.Master" AutoEventWireup="true" CodeBehind="MissingPersonDetail.aspx.cs" Inherits="CRMS1.AddMissingPersonDetail" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

<%--Framework Scripts--%>

<asp:ScriptReference Name="MsAjaxBundle" />

<asp:ScriptReference Name="jquery" />

<asp:ScriptReference Name="jquery.ui.combined" />

<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />

<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />

<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />

<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />

<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />

<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />

<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />

<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />

<asp:ScriptReference Name="WebFormsBundle" />

<%--Site Scripts--%>

<asp:ScriptReference Path="~/Scripts/AjaxControlToolkit/Bundle" />

</Scripts>

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate>

<h2><span>Add Missing Person's Detail</span></h2>

</div>

</section>

<asp:Panel ID="Panel1" runat="server">

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

</div>

</asp:Panel>

<asp:Panel ID="Panel2" runat="server">

</asp:Panel>

<br />

<table>

 <asp:TextBox ID="TextBox2" runat="server" CssClass="form-control" Width="220px" Height="40px"></asp:TextBox>

<br />

<asp:RequiredFieldValidator runat="server" ID="NReq"

ControlToValidate="TextBox2"

Display="None"

SetFocusOnError="true"

ErrorMessage="<b>Required Field Missing</b><br />Full Name Is Required." />

<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="NReqE"

TargetControlID="NReq"

HighlightCssClass="validatorCalloutHighlight" />

</td>

</tr>

<tr> <td>Father Name :</td>

<asp:TextBox ID="TextBox3" runat="server" CssClass="form-control" Width="220px" Height="40px"></asp:TextBox>

<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator2"

ControlToValidate="TextBox3"

Display="None" DisplayOnClick="true"

SetFocusOnError="true"

ErrorMessage="<b>Required Field Missing</b><br />Father Name Is Required." />

<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender1"

TargetControlID="RequiredFieldValidator2"

HighlightCssClass="validatorCalloutHighlight" />

</td>

</tr>

<tr>

 <asp:TextBox ID="TextBox4" runat="server" CssClass="form-control" Width="220px" Height="40px" AutoPostBack="True" OnTextChanged="TextBox4_TextChanged"></asp:TextBox>

</td>

<asp:Panel ID="Panel4" runat="server" Width="24px">

</asp:Panel>

<asp:Panel ID="Panel5" runat="server">

</asp:Panel>

</td>

<ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender1" runat="server"

TargetControlID="TextBox4"

Mask="99999/9999999/9"

MaskType="Number"

ClearMaskOnLostFocus="False" />

<asp:RegularExpressionValidator runat="server" ID="PNRegEx"

ControlToValidate="TextBox4"

Display="None"

ValidationExpression="\d{5}-\d{7}-\d{1}"

ErrorMessage="<b>Invalid Field</b><br />Please Enter A CNIC Number In The Format:<br />12345-1234567-1" SetFocusOnError="True" />

<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="PNReqEx"

TargetControlID="PNRegEx"

HighlightCssClass="validatorCalloutHighlight" />

</tr>

<tr>

<td>

<br />

Gender :</td>

<br />

<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" Width="240px">

<asp:ListItem>Male</asp:ListItem>

<asp:ListItem>Fe-Male</asp:ListItem>

</asp:RadioButtonList>

<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator5"

ControlToValidate="RadioButtonList1"

Display="None" DisplayOnClick="true"

SetFocusOnError="true"

ErrorMessage="<b>Required Field Missing</b><br />Please Select Gender." />

<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender3"

TargetControlID="RequiredFieldValidator5"

HighlightCssClass="validatorCalloutHighlight" />

</td>

</tr>

<tr> <td>Date Of Birth :</td>

 <asp:TextBox ID="TextBox5" runat="server" CssClass="form-control" Width="220px" Height="40px"></asp:TextBox>

<em>  (Click Image Button To Select DOB)</em>

<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator6"

ControlToValidate="TextBox5"

Display="None" DisplayOnClick="true"

SetFocusOnError="true"

ErrorMessage="<b>Required Field Missing</b><br>Date Of Birth Required.<br />Click Image Button To Select Date Of Birth." />

<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender4"

TargetControlID="RequiredFieldValidator6"

HighlightCssClass="validatorCalloutHighlight" />

<asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator3"

ControlToValidate="TextBox5"

Display="None"

ValidationExpression="\d{2}/\d{2}/\d{4}"

ErrorMessage="<b>Invalid Field</b><br />Please Enter A Correct Date Of Birth" SetFocusOnError="True" />

<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender6"

TargetControlID="RegularExpressionValidator3"

HighlightCssClass="validatorCalloutHighlight" />

<br />

</td>

<asp:ImageButton runat="Server" ID="Image1" ImageUrl="~/Images/Calendar_scheduleHS.png" Image AlternateText="Click to show calendar" />

<ajaxToolkit:CalendarExtender ID="calendarButtonExtender" runat="server" TargetControlID="TextBox5" Format="dd/MM/yyyy" PopupButtonID="Image1" />

</td>

</tr>

<tr>

<td>

<br />

Nationality :</td>

<br />

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" DataSourceID="SqlDataSource1" DataTextField="NationalityName" DataValueField="NationalityId" Height="45px" Width="220px" CssClass="form-control" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">

</asp:DropDownList>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:CRMSConnectionString %>" SelectCommand="SELECT * FROM [Nationality]"></asp:SqlDataSource>

</td>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Select Nationality" ControlToValidate="DropDownList1" ForeColor="#FF9900" InitialValue="1" SetFocusOnError="True" ValidationGroup="one">*</asp:RequiredFieldValidator>

<asp:UpdateProgress ID="UpdateProgress1" runat="server">

</ProgressTemplate>

</asp:UpdateProgress>

</td>

</tr>

<br />

Province :</td> <td style="width: 235px">

 <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True" DataSourceID="SqlDataSource2" DataTextField="ProvinceName" DataValueField="ProvinceId" Height="45px" Width="220px" CssClass="form-control">

</asp:DropDownList>

<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:CRMSConnectionString %>" SelectCommand="SELECT Province.ProvinceName, Province.ProvinceId FROM Province INNER JOIN Nationality ON Province.NationalityId = Nationality.NationalityId WHERE (Province.NationalityId = @NationalityId)">

<asp:ControlParameter ControlID="DropDownList1" Name="NationalityId" PropertyName="SelectedValue" />

</SelectParameters>

</asp:SqlDataSource>

</td>

<asp:RequiredFieldValidator ID="RequiredFieldValidator17" runat="server" ControlToValidate="DropDownList2" ErrorMessage="Select Province" ForeColor="#FF9900" InitialValue="2" SetFocusOnError="True" ValidationGroup="one">*</asp:RequiredFieldValidator>

</td>

</tr>

<br />

City :</td> <td style="width: 235px">

 <asp:DropDownList ID="DropDownList3" runat="server" DataSourceID="SqlDataSource3" DataTextField="CityName" DataValueField="CityId" Height="45px" Width="220px" AutoPostBack="True" CssClass="form-control">

</asp:DropDownList>

<asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:CRMSConnectionString %>" SelectCommand="SELECT City.CityId, City.CityName FROM City INNER JOIN Province ON City.ProvinceId = Province.ProvinceId WHERE (Province.NationalityId = @NationalityId) AND (City.ProvinceId = @ProvinceId)">

<asp:ControlParameter ControlID="DropDownList1" Name="NationalityId" PropertyName="SelectedValue" />

<asp:ControlParameter ControlID="DropDownList2" Name="ProvinceId" PropertyName="SelectedValue" />

</SelectParameters>

</asp:SqlDataSource>

</td>

<asp:RequiredFieldValidator ID="RequiredFieldValidator18" runat="server" ControlToValidate="DropDownList3" ErrorMessage="Select City" ForeColor="#FF9900" InitialValue="1" SetFocusOnError="True" ValidationGroup="one">*</asp:RequiredFieldValidator>

</td>

</tr>

<br />

Area :</td> <td style="width: 235px">

 <asp:DropDownList ID="DropDownList4" runat="server" DataSourceID="SqlDataSource4" DataTextField="AreaName" DataValueField="AreaId" AutoPostBack="True" CssClass="form-control" Height="45px" Width="220px">

</asp:DropDownList>

<asp:SqlDataSource ID="SqlDataSource4" runat="server" ConnectionString="<%$ ConnectionStrings:CRMSConnectionString %>" SelectCommand="SELECT Area.AreaId, Area.AreaName FROM Area INNER JOIN City ON Area.CityId = City.CityId INNER JOIN Province ON Area.ProvienceId = Province.ProvinceId AND City.ProvinceId = Province.ProvinceId WHERE (Area.CityId = @CityId) AND (City.ProvinceId = @ProvinceId)">

<asp:ControlParameter ControlID="DropDownList3" Name="CityId" PropertyName="SelectedValue" />

<asp:ControlParameter ControlID="DropDownList2" Name="ProvinceId" PropertyName="SelectedValue" />

</SelectParameters>

</asp:SqlDataSource>

</td>

<asp:RequiredFieldValidator ID="RequiredFieldValidator21" runat="server" ControlToValidate="DropDownList4" ErrorMessage="Select Area" ForeColor="#FF9900" InitialValue="1" SetFocusOnError="True" ValidationGroup="one">*</asp:RequiredFieldValidator>

</td>

</tr>

<br />

Police Station :  </td> <td style="width: 235px">

 <asp:DropDownList ID="DropDownList7" runat="server" DataSourceID="SqlDataSource7" DataTextField="PoliceStationName" DataValueField="PoliceStationId" CssClass="form-control" Height="45px" Width="220px">

</asp:DropDownList>

<asp:SqlDataSource ID="SqlDataSource7" runat="server" ConnectionString="<%$ ConnectionStrings:CRMSConnectionString %>" SelectCommand="SELECT PoliceStation.PoliceStationId, PoliceStation.PoliceStationName FROM PoliceStation INNER JOIN Area ON PoliceStation.AreaId = Area.AreaId INNER JOIN City ON PoliceStation.CityId = City.CityId AND Area.CityId = City.CityId WHERE (PoliceStation.AreaId = @AreaId) AND (Area.CityId = @CityId)">

<asp:ControlParameter ControlID="DropDownList4" Name="AreaId" PropertyName="SelectedValue" />

<asp:ControlParameter ControlID="DropDownList3" Name="CityId" PropertyName="SelectedValue" />

</SelectParameters>

</asp:SqlDataSource>

</td>

<asp:RequiredFieldValidator ID="RequiredFieldValidator22" runat="server" ControlToValidate="DropDownList7" ErrorMessage="Select Police Station" ForeColor="#FF9900" InitialValue="1" SetFocusOnError="True" ValidationGroup="one">*</asp:RequiredFieldValidator>

</td>

</tr>

<br />

Religion :</td> <td style="width: 235px">

<br />

<asp:DropDownList ID="DropDownList5" runat="server" DataSourceID="SqlDataSource5" DataTextField="ReligionName" DataValueField="ReligionId" Height="45px" Width="220px" CssClass="form-control">

</asp:DropDownList>

<asp:SqlDataSource ID="SqlDataSource5" runat="server" ConnectionString="<%$ ConnectionStrings:CRMSConnectionString %>" SelectCommand="SELECT * FROM [Religion]"></asp:SqlDataSource>

</td>

<asp:RequiredFieldValidator ID="RequiredFieldValidator19" runat="server" ControlToValidate="DropDownList5" ErrorMessage="Select Religion" ForeColor="#FF9900" InitialValue="1" SetFocusOnError="True" ValidationGroup="one">*</asp:RequiredFieldValidator>

</td>

</tr>

<br />

<asp:DropDownList ID="DropDownList6" runat="server" CssClass="form-control" DataSourceID="SqlDataSource6" DataTextField="JobName" DataValueField="JobId" Height="45px" Width="220px">

</asp:DropDownList>

<asp:SqlDataSource ID="SqlDataSource6" runat="server" ConnectionString="<%$ ConnectionStrings:CRMSConnectionString %>" SelectCommand="SELECT * FROM [Job]"></asp:SqlDataSource>

 <br />

</td>

<asp:RequiredFieldValidator ID="RequiredFieldValidator20" runat="server" ControlToValidate="DropDownList6" ErrorMessage="Select Job" ForeColor="#FF9900" InitialValue="1" SetFocusOnError="True" ValidationGroup="one">*</asp:RequiredFieldValidator>

</td>

</tr>

<asp:TextBox ID="TextBox6" runat="server" CssClass="form-control" Width="220px" Height="40px"></asp:TextBox>

<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator7"

ControlToValidate="TextBox6"

Display="None" DisplayOnClick="true"

SetFocusOnError="true"

ErrorMessage="<b>Required Field Missing</b><br />Age Is Required." />

<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender5"

TargetControlID="RequiredFieldValidator7"

HighlightCssClass="validatorCalloutHighlight" />

<asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator1"

ControlToValidate="TextBox6"

Display="None"

ValidationExpression="\d{2}"

ErrorMessage="<b>Invalid Field</b><br />Please Enter A Correct Age" SetFocusOnError="True" />

<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender2"

TargetControlID="RegularExpressionValidator1"

HighlightCssClass="validatorCalloutHighlight" />

</td>

</tr>

<tr> <td>Missing Date :</td>

 <asp:TextBox ID="TextBox1" runat="server" CssClass="form-control" Width="220px" Height="40px"></asp:TextBox>

<em>  (Click Image Button To Select DOB)</em>

<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator3"

ControlToValidate="TextBox1"

Display="None" DisplayOnClick="true"

SetFocusOnError="true"

ErrorMessage="<b>Required Field Missing</b><br>Missing Date Required.<br />Click Image Button To Select Missing Date." />

<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender7"

TargetControlID="RequiredFieldValidator3"

HighlightCssClass="validatorCalloutHighlight" />

<asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator4"

ControlToValidate="TextBox1"

Display="None"

ValidationExpression="\d{2}/\d{2}/\d{4}"

ErrorMessage="<b>Invalid Field</b><br />Please Enter A Correct Date" SetFocusOnError="True" />

<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender8"

TargetControlID="RegularExpressionValidator4"

HighlightCssClass="validatorCalloutHighlight" />

</td>

<asp:ImageButton runat="Server" ID="ImageButton1" ImageUrl="~/Images/Calendar_scheduleHS.png" Image AlternateText="Click to show calendar" />

<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1" Format="dd/MM/yyyy" PopupButtonID="ImageButton1" />

</td>

</tr>

<tr>

<td>

<br />

Missing Time :</td>

<br />

<asp:TextBox ID="TextBox7" runat="server" CssClass="form-control" Width="220px" Height="40px"></asp:TextBox>

<ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender3" runat="server"

TargetControlID="TextBox7"

Mask="99:99"

MaskType="Time"

AcceptAMPM="True" ClearMaskOnLostFocus="False" />

</td>

</tr>

<tr>

<td>

<br />

Missing Place :</td> <td style="width: 235px">

<br />

<asp:TextBox ID="TextBox8" runat="server" CssClass="form-control" Width="220px" Height="60px" TextMode="MultiLine"></asp:TextBox>

<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator4"

ControlToValidate="TextBox8"

Display="None" DisplayOnClick="true"

SetFocusOnError="true"

ErrorMessage="<b>Required Field Missing</b><br>Missing Place Required." />

<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender9"

TargetControlID="RequiredFieldValidator4"

HighlightCssClass="validatorCalloutHighlight" />

</td>

</tr>

<tr>

<td>

<br />

Phone Number :</td> <td style="width: 235px">

 <asp:TextBox ID="TextBox9" runat="server" CssClass="form-control" Width="220px" Height="40px"></asp:TextBox>

<ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender2" runat="server"

TargetControlID="TextBox9"

Mask="9999/9999999"

MaskType="Number"

ClearMaskOnLostFocus="False" />

<asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator5"

ControlToValidate="TextBox9"

Display="None"

ValidationExpression="\d{4}-\d{7}"

ErrorMessage="<b>Invalid Field</b><br />Please Enter A Phone Number In The Format:<br />0321-1234567" SetFocusOnError="True" />

<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender12"

TargetControlID="RegularExpressionValidator5"

HighlightCssClass="validatorCalloutHighlight" />

</td>

</tr>

<tr>

<td>

<br />

Address :</td> <td style="width: 235px">

 <asp:TextBox ID="TextBox10" runat="server" Height="80px" TextMode="MultiLine" Width="220px" CssClass="form-control"></asp:TextBox>

<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator8"

ControlToValidate="TextBox10"

Display="None" DisplayOnClick="true"

SetFocusOnError="true"

ErrorMessage="<b>Required Field Missing</b><br>Address Is Required." />

<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender10"

TargetControlID="RequiredFieldValidator8"

HighlightCssClass="validatorCalloutHighlight" />

</td>

</tr>

<tr>

<td><br />Image :</td>

 <asp:FileUpload ID="FileUpload1" runat="server" CssClass="form-control" Height="40px" Width="220px" />

<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator9"

ControlToValidate="FileUpload1"

Display="None" DisplayOnClick="true"

SetFocusOnError="true"

ErrorMessage="<b>Required Field Missing</b><br>Image Is Required." />

<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender11"

TargetControlID="RequiredFieldValidator9"

HighlightCssClass="validatorCalloutHighlight" />

</td>

</tr>

 </td> <td style="width: 235px">

<br />

<asp:Button ID="Button1" runat="server" Text="Add Missing Person Detail" Height="40px" Width="220px" OnClick="Button1_Click" CssClass="btn-warning" />

</td></tr>

</table>

</div>

</center>

<br />

</div>

</ContentTemplate></asp:UpdatePanel>

</asp:Content>