<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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></title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <div>
        <telerik:RadInputManager ID="RadInputManager1" runat="server">
            <telerik:NumericTextBoxSetting MinValue="0" MaxValue="115">
                <ClientEvents OnError="onClientNumTxtError" OnBlur="onClientTxtBlur" OnKeyPress="onClientTextChanged" />
                <TargetControls>
                    <telerik:TargetInput ControlID="txtAge" />
                </TargetControls>
            </telerik:NumericTextBoxSetting>
            <telerik:DateInputSetting MinDate="1/1/1980" MaxDate="1/1/2020">
                <ClientEvents OnError="onClientDateTxtError" OnKeyPress="onClientTextChanged" />
                <TargetControls>
                    <telerik:TargetInput ControlID="txtDate" />
                </TargetControls>
            </telerik:DateInputSetting>
            <telerik:RegExpTextBoxSetting IsRequiredFields="true" ValidationExpression="^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
                <ClientEvents OnError="onClientRegTxtError" OnKeyPress="onClientTextChanged" />
                <TargetControls>
                    <telerik:TargetInput ControlID="txtEmail" />
                </TargetControls>
            </telerik:RegExpTextBoxSetting>
        </telerik:RadInputManager>
        <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" 
            Position="MiddleRight" 
            RelativeTo="Element" 
            AutoTooltipify="false" 
            Skin="Hay" 
            Animation="Fade" 
            ShowEvent="FromCode"
            HideEvent="FromCode">
        </telerik:RadToolTipManager>
        <h1>Enter your details</h1>
        Enter your age: <asp:TextBox runat="server" ID="txtAge"></asp:TextBox><br />
        Enter your birthdate: <asp:TextBox runat="server" ID="txtDate"></asp:TextBox><br />
        Enter your email: <asp:TextBox runat="server" ID="txtEmail"></asp:TextBox>
    </div>
    <script type="text/javascript">
            var errorCount = 0; //Keep track of Numeric input errors
            var tooltipManager = null; //Ref to tooltipManager
        
            //Handles Numeric input errors (fires as user types error)
            function onClientNumTxtError(sender, args) {
                //Keep track of key errors
                //(Note: Numeric input fires OnError as
                // the user types if key is not numeric)
                errorCount += 1;
                
                //If user makes 3 errors, try to provide additional
                //assistance via a tooltip (they must be having trouble)
                if (errorCount > 2) {
                    //Get DOM reference to textbox
                    var eleId = args.get_targetInput().get_id();
                    var ele = $get(eleId);

                    //Try to get max/min setting for input control
                    var max = sender.get_maxValue();
                    var min = sender.get_minValue();
                    var errMsg = "Value out of range";
                    
                    //If min or max value are set, try to customize error message
                    if (max != null && min != null)
                        errMsg = String.format("Value must be between {0} and {1}", min, max);
                    else if (max != null && min == null)
                        errMsg = String.format("Value may not be higher than {0}", max);
                    else if (max == null && min != null)
                        errMsg = String.format("Value may not be lower than {0}", min);
                    
                    //Show error tip
                    showErrorTip(ele, errMsg);
                }
            }

            //Handles Date data input errors (fires on blur if input is invalid)
            function onClientDateTxtError(sender, args) {
                //Get DOM reference to textbox
                var eleId = args.get_targetInput().get_id();
                var ele = $get(eleId);

                //Try to get max/min date values allowed
                var max = sender.get_maxDate();
                var min = sender.get_minDate();
                var errMsg = "Date is out of range";
                
                //If min or max date are set, customize the error message
                if (max != null && min != null)
                    errMsg = String.format("Date must be between {0} and {1}", min.format("d"), max.format("d"));
                else if (max != null && min == null)
                    errMsg = String.format("Date must be on or before {0}", max.format("d"));
                else if (max == null && min != null)
                    errMsg = String.format("Date must be on or after {0}", min.format("d"));
                
                //Show the error tip
                showErrorTip(ele, errMsg);
            }

            //Handles RegEx input errors (fires on blur if input is invalid)
            function onClientRegTxtError(sender, args) {
                //Get DOM reference to textbox
                var eleId = args.get_targetInput().get_id();
                var ele = $get(eleId);
                
                //Get error message from control
                var errMsg = sender.get_errorMessage();
                //Handle missing error message
                if (errMsg == null || errMsg == "")
                    errMsg = "Invalid entry";
                    
                //Show error message
                showErrorTip(ele, errMsg);
            }

            //Displays ToolTip with supplied message
            function showErrorTip(element, msg) {
                //Init tooltipmanager reference (if necessary)
                if (tooltipManager == null)
                    tooltipManager = $find("<%= RadToolTipManager1.ClientID %>");
                //If the user hovers the image before the page has loaded, there is no manager created
                if (!tooltipManager) return;

                //Find the tooltip for this element if it has been created
                var tooltip = tooltipManager.getToolTipByElement(element);

                //Create a tooltip if no tooltip exists for such element
                if (!tooltip)
                    tooltip = tooltipManager.createToolTip(element);

                //Set tooltip details
                tooltip.set_content(msg);
                tooltip.set_autoCloseDelay(5000);
                tooltip.set_manualClose(false);
                tooltip.show();                    
            }
        
        function onClientTxtBlur(sender, args) {
            //Reset error count
            errorCount = 0;
        }

        //Handle the OnKeyPress event of RadInput
        function onClientTextChanged(sender, args) {
            //Hide any open tips on typing
            HideTooltip();
        }

        //Hides the open ToolTip (if there is one)
        function HideTooltip() {
            var tip = Telerik.Web.UI.RadToolTip.getCurrent();
            if (tip) tip.hide();
        }
    </script>
    </form>
</body>
</html>
