This blog we will see how to show and hide a ASP.NET AJAX’ (AJAXControlToolkit) ValidatorCalloutExtender control using javascript. Below is an aspx page with a validator callout control.
<body>
<form id="form1" runat="server">
<div>
<!--ASP.NET Drop down control-->
<asp:DropDownList ID="status" runat="server" >
<asp:ListItem Selected="True" Text="Select" Value="0" />
<asp:ListItem Text="One" />
<asp:ListItem Text="Two" />
<asp:ListItem Text="Three" />
</asp:DropDownList>
<!--ASP.NET Required Field Validator to validate the drop down.-->
<asp:RequiredFieldValidator ID="statusValidator" runat="server"ErrorMessage="Please choose a value other than 'Select'"
ControlToValidate="status" InitialValue="0" Visible="true">
</asp:RequiredFieldValidator>
<!--Validator callout control-->
<AJAXControls:ValidatorCalloutExtender ID="statusValidator_ValidatorCalloutExtender"
runat="server" TargetControlID="statusValidator">
</AJAXControls:ValidatorCalloutExtender>
<asp:Button ID="submit" Text="Submit" OnClientClick="javascript:return ValidatePage();"
runat="server" />
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</form>
</body>
The above code has a dropdown control with an ASP.NET required field validator control and a validator callout control attached to it. As soon as you click the submit button and if there is a validation error the error will be popped out in the validator callout control as shown below.
Popping of the error message in a validator callout control happens automatically. But there may be scenario where you would like to hide or show the validator control using javascript. The below sample code does exactly that.
<script language="javascript" type="text/javascript">
function ValidatePage()
{
//Function which calls the whole validation for the page.
if (Page_ClientValidate())
{
return true;
}
else
{
hideValidatorCallout();
return false;
}
}
//User defined method which hides the AjaxControlToolkit ValidatorCalloutExtender control
function hideValidatorCallout()
{
//Below code hides the active AjaxControlToolkit ValidatorCalloutExtender control.
AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.hide();
setTimeout(showValidatorCallout, 3000);
}
function showValidatorCallout()
{
//Gets the AjaxControlToolkit ValidatorCalloutExtender control using the $find method.
AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout =$find('<% =statusValidator_ValidatorCalloutExtender.ClientID%>');
//Below code unhides the AjaxControlToolkit ValidatorCalloutExtender control.
AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.show(true);
}
</script>
function ValidatePage()
{
//Function which calls the whole validation for the page.
if (Page_ClientValidate())
{
return true;
}
else
{
hideValidatorCallout();
return false;
}
}
//User defined method which hides the AjaxControlToolkit ValidatorCalloutExtender control
function hideValidatorCallout()
{
//Below code hides the active AjaxControlToolkit ValidatorCalloutExtender control.
AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.hide();
setTimeout(showValidatorCallout, 3000);
}
function showValidatorCallout()
{
//Gets the AjaxControlToolkit ValidatorCalloutExtender control using the $find method.
AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout =$find('<% =statusValidator_ValidatorCalloutExtender.ClientID%>');
//Below code unhides the AjaxControlToolkit ValidatorCalloutExtender control.
AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.show(true);
}
</script>
