Learnings from ValidatorCalloutExtender in AJAX

Using the ValidatorCalloutExtender is quite a truicky thing. Take care of below notes while using them.

· By default, when the validator trigger, the error message is shown at two places – One is in Extender and other one is in Default Validator.

o To avoid this make use of ‘*’

· By default, when the validation trigger fies at button click, the error message is shown only for the first extender. For the rest of the things, the message is shown when the focus is arrived to the particlar control.

o To avoid this use ‘SetFocusOnError’ property.

· The extender must be placed in the same Update Panel where the validator is placed.

<form id="form1" runat="server">

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

</asp:ScriptManager>

<div>

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

<ContentTemplate>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="TextBox1"

SetFocusOnError="true">*</asp:RequiredFieldValidator>

<asp:TextBox ID="TextBox2" runat="server" TabIndex="1"></asp:TextBox>

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

ErrorMessage="RequiredFieldValidator" SetFocusOnError="true">*</asp:RequiredFieldValidator>

<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

<ajaxtoolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="RequiredFieldValidator2" />

<ajaxtoolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server" TargetControlID="RequiredFieldValidator1" />

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

Thanks & Regards,

Arun Manglick || Tech Lead