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>

· One more important thing: Update Panel is not necessary to use the Validator Callout Extender. i.e It can be used without them as below:

o All we requite is the use of ‘ScriptManager’ control.

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

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

</asp:ScriptManager>

<div>

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

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

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

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

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

</div>

</form>

Thanks & Regards,

Arun Manglick || Tech Lead