Hide/Show Validator Callout Control Using Javascript: ASP.NET AJAX, ValidatorCalloutExtender, ASP.NET

In this article 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.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="AJAXControls" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Untitled Page</title> 
</head>

<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> 
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:

Select all Open in new window

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 there is a validation error, the error will be popped out in the validator callout control, as shown below.

image-thumb-9-.png

4 KB
Message in a validator callout control

The popping of 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>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:

Select all Open in new window

In the above code, there is a line like this:

“AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout”.

The _currentCallout property will hold a reference to a ValidatorCalloutExtender (VCE) control. Whenever there is a validation failure, and there is a validator callout control associated with a validation control, the _currentCallout property will hold a reference to that VCE. If there are more than one VCE controls on the page, then the VCE control associated with the first validation control which throws the error will be assigned to the "_currentCallout" property. To hide the validator callout control, you need to use the “hide” Javascript function, along with the _currentCallout property, as shown below:

AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.hide();

1:

Select all Open in new window

At any given point the _currentCallout property will have only one VCE assigned, this is to avoid the confusion or dirtiness which can arise by displaying all the VCE control at the same time. If all the validator callouts are shown, when multiple validation fails, then the screen will be cluttered with lots of VCE controls popping here and there. To avoid cluttered view this approach of showing only one VCE control at a time has been taken.

Similarly, to show the validator callout control, you can use the “show” Javascript method, along with the _currentCallout property, as shown below:

//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);

1:
2:
3:
4:

Select all Open in new window

But, the above code, if used just like that, can throw the following error:

Microsoft JScript runtime error: 'this._popupBehavior' is null or not an object

The reason why this happens is that we have not called either ValidatorEnable or ValidatorValidate Javascript functions. These two functions set the necessary things, like _popupBehavior property, for the validator control to work properly. VCE controls are not meant to be shown directly--they are actually extender controls, which extend the functionality of the validation control. These controls are shown automatically when a validatation control's validation condition fails. If you want to show a VCE function, call the ValidatorEnable or ValidatorValidate Javascript function.

That's about it on how to hide and show validator callout controls using Javascript. I know I have not mentioned anything about the “$find” javascript function. You can find more about $find in one of my blogs here.

Some important methods of ValidatorCallout controls:

_getErrorMessage(): Gets/returns the error message
get_closeImageUrl(): Gets/returns the close image url at the top rightmost corner of the validator callout control--default is an x mark
get_isOpen(): Gets/returns a boolean value indicating whether the validator callout is opened or not
get_warningIconImageUrl(): Gets/returns the warning icon image’ url. Default is an exclamation mark inside a triangle
get_width(): Gets/returns the width of the validator callout control
hide(): Function to hide the validator callout control
set_closeImageUrl(imageUrl): Function to set the close image url--use this method to change the default X mark
set_warningIconImageUrl(imageUrl): Function to set the warning image--use this function to change the default exclamation image used for warning
set_width(int) Function used to set the width of the validator callout control
show(): To show the validator callout control
_closeImageUrl: Property to get/set the close image
_warningIconImageUrl: Property to get/set the warning image
_width: Property to get/set the width of the validator callout control
_popupBehavior: Property using which one can work with the pop up behaviour of the validator callout control
_errorMessageCell: Property using which one can modify the error message

Some methods of ValidatorCallout._popupBehavior property:

Below I have listed few methods of _popupBehavior property of validator callout function. These methods are available with only _popupBehavior property. If you want to use these methods, then retrieve the _popupBehavior property from validator callout control by any of the following two means shown below:

//Retrieving the validator callout control using the $find helper method. 
var valCallout = $find('<%=statusValidator_ValidatorCalloutExtender.ClientID %>'); 
//Get the _popupBehavior property in a variant object and then 
//use the required methods. 
var popUpBehavior = valCallout._popupBehavior; 
popUpBehavior.set_x(10); 
popUpBehavior.set_y(20); 
//Directly use the methods along with the _popupBehavior property as shown below. 
valCallout._popupBehavior.set_x(20); 
valCallout._popupBehavior.set_y(30);

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:

Select all Open in new window

After retrieving the _popupBehavior property with the above methods, you can use the following methods:

get_x(): Method to get the X coordinates of the validator callout control
get_y(): Method to get the Y coordinates of the validator callout control.
get_visible(): Methods that returns a boolean value specifying whether the validator callout control is visible or not.
set_x(x_coordinate): Method to set the X coordinate for the validator callout control. Method takes an integer value as an argument.
set_y(y_coordinate): Method to set the Y coordinate for the validator callout control. Method takes an integer value as an argument.

Some methods of ValidatorCallout._errorMessageCell property:

Since _errorMessageCell returns a TD (cell) object, there is nothing much new. It has all the methods/properties corresponding to a cell object. You can use this property to change the error message of the validator callout extendor control using Javascript. To change the error message using Javascript, see the code below:

//Retrieving the validator callout control using the $find helper method. 
var valCallout = $find('<%=statusValidator_ValidatorCalloutExtender.ClientID %>'); 
//Get the error message cell. 
var messageCell = valCallout._errorMessageCell; 
//Changing the error message. 
messageCell.innerHTML = "Changed:)";

1:
2:
3:
4:
5:
6:

Select all Open in new window

You can find the original article and discussions here (http://sandblogaspnet.blogspot.com/2009/04/hideshow-validator-callout-control.html)

Hide/Show Validator Callout Control Using Javascript

ASP.NET AJAX

ValidatorCalloutExtender

ASP.NET

Programming for ASP.NET

About The Author

More Articles From sand1980

Comments

Add your Comment

Join Experts Exchange Today

Gain Access to all our Tech Resources

Get personalized answers

Access Proven Solutions

Read In-Depth How-To Guides

Watch Step by Step Tutorials

And Much More!

Top ASP.NET Experts