Hello
I am validating a RadDatePicker control using a RequiredFieldValidator and a ValidatorCalloutExtender.
The control is being validated successfully but the ValidatorCalloutExtender is not showing/popping up when the input date is invalid/empty. It also doesn't highlight the RadDateTime input box yellow when its empty/invalid.
Any ideas why this would be failing to display when other widgets (regular TextBoxes, etc.) have their ValidatorCalloutExtender's working?
<
telerik:RadDatePicker
ID
=
"Expiry"
runat
=
"server"
ClientIDMode
=
"Static"
> ... </
telerik:RadDatePicker
>
<
asp:RequiredFieldValidator
ID
=
"rfvExpiry"
runat
=
"server"
ErrorMessage
=
"Expiry is a required field"
SetFocusOnError
=
"true"
ControlToValidate
=
"Expiry"
Text
=
"*"
ClientIDMode
=
"Static"
/>
<
ajaxtoolkit:ValidatorCalloutExtender
ID
=
"vcerfvExpiry"
runat
=
"Server"
TargetControlID
=
"rfvExpiry"
Width
=
"350px"
HighlightCssClass
=
"highlight"
WarningIconImageUrl
=
"warning.gif"
CloseImageUrl
=
"close.gif"
/>
5 Answers, 1 is accepted
I tested the described scenario on my end and it appears to work correctly. Find attached my tests applictaion and verify what the difference in your case is.
Regards,
Maria Ilieva
Telerik
Hi Maria
Thanks for your response. Below is a simple example that demonstrates the error. There are multiple RadDatePickers (RDP). The first RDP's Callout Extender works fine but if I fill in the top/first picker then click 'Next' in the wizard the ValidatorCalloutExtender for the others does not appear (sometimes the 4th one will). In this case the second ValidatorCalloutExtender should show but it doesn't.
If I put the focus in the second picker then click 'Next' sometimes the ValidatorCalloutExtender will show.
Any ideas how to fix this?
<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Debug.aspx.vb" Inherits="D_Debug" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" Assembly="AjaxControlToolkit" %>
<
asp:Content
ID
=
"Content2"
ContentPlaceHolderID
=
"cphBody"
runat
=
"Server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
<
Scripts
>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.Core.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQuery.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQueryInclude.js"
/>
</
Scripts
>
</
telerik:RadScriptManager
>
<
telerik:RadAjaxManager
runat
=
"server"
ID
=
"RadAjaxManager1"
> </
telerik:RadAjaxManager
>
<
div
id
=
"checkApp"
>
<
telerik:RadTabStrip
ID
=
"rtsReports"
runat
=
"server"
Skin
=
"Outlook"
MultiPageID
=
"rnpReports"
SelectedIndex
=
"3"
>
<
Tabs
>
<
telerik:RadTab
Text
=
"Start"
SelectedCssClass
=
"SelectedTab"
/>
<
telerik:RadTab
Text
=
"Middle"
Enabled
=
"false"
SelectedCssClass
=
"SelectedTab"
/>
<
telerik:RadTab
Text
=
"Finish"
Enabled
=
"false"
SelectedCssClass
=
"SelectedTab"
/>
</
Tabs
>
</
telerik:RadTabStrip
>
<
div
id
=
"body"
>
<
asp:Wizard
ID
=
"wzdRegister"
runat
=
"server"
DisplaySideBar
=
"False"
FinishCompleteButtonText
=
"Submit"
ActiveStepIndex
=
"0"
>
<
WizardSteps
>
<
asp:WizardStep
ID
=
"wzsIdentification"
runat
=
"server"
Title
=
"Identification"
>
<
telerik:RadDatePicker
ID
=
"Expiry"
runat
=
"server"
ClientIDMode
=
"Static"
></
telerik:RadDatePicker
>
<
asp:RequiredFieldValidator
ID
=
"rfvExpiry"
runat
=
"server"
ErrorMessage
=
"Expiry is a required field"
SetFocusOnError
=
"true"
ControlToValidate
=
"Expiry"
Text
=
"*"
ClientIDMode
=
"Static"
/>
<
ajaxtoolkit:ValidatorCalloutExtender
ID
=
"vcerfvExpiry"
runat
=
"Server"
TargetControlID
=
"rfvExpiry"
Width
=
"350px"
HighlightCssClass
=
"highlight"
WarningIconImageUrl
=
"warning.gif"
CloseImageUrl
=
"close.gif"
/>
<
br
/>
<
telerik:RadDatePicker
ID
=
"RadDatePicker1"
runat
=
"server"
ClientIDMode
=
"Static"
></
telerik:RadDatePicker
>
<
asp:RequiredFieldValidator
ID
=
"RequiredFieldValidator1"
runat
=
"server"
ErrorMessage
=
"Expiry is a required field"
SetFocusOnError
=
"true"
ControlToValidate
=
"RadDatePicker1"
Text
=
"*"
ClientIDMode
=
"Static"
/>
<
ajaxtoolkit:ValidatorCalloutExtender
ID
=
"ValidatorCalloutExtender1"
runat
=
"Server"
TargetControlID
=
"RequiredFieldValidator1"
Width
=
"350px"
HighlightCssClass
=
"highlight"
WarningIconImageUrl
=
"warning.gif"
CloseImageUrl
=
"close.gif"
/>
<
br
/>
<
telerik:RadDatePicker
ID
=
"RadDatePicker2"
runat
=
"server"
ClientIDMode
=
"Static"
></
telerik:RadDatePicker
>
<
asp:RequiredFieldValidator
ID
=
"RequiredFieldValidator2"
runat
=
"server"
ErrorMessage
=
"Expiry is a required field"
SetFocusOnError
=
"true"
ControlToValidate
=
"RadDatePicker2"
Text
=
"*"
ClientIDMode
=
"Static"
/>
<
ajaxtoolkit:ValidatorCalloutExtender
ID
=
"ValidatorCalloutExtender2"
runat
=
"Server"
TargetControlID
=
"RequiredFieldValidator2"
Width
=
"350px"
HighlightCssClass
=
"highlight"
WarningIconImageUrl
=
"warning.gif"
CloseImageUrl
=
"close.gif"
/>
<
br
/>
<
telerik:RadDatePicker
ID
=
"RadDatePicker3"
runat
=
"server"
ClientIDMode
=
"Static"
></
telerik:RadDatePicker
>
<
asp:RequiredFieldValidator
ID
=
"RequiredFieldValidator3"
runat
=
"server"
ErrorMessage
=
"Expiry is a required field"
SetFocusOnError
=
"true"
ControlToValidate
=
"RadDatePicker3"
Text
=
"*"
ClientIDMode
=
"Static"
/>
<
ajaxtoolkit:ValidatorCalloutExtender
ID
=
"ValidatorCalloutExtender3"
runat
=
"Server"
TargetControlID
=
"RequiredFieldValidator3"
Width
=
"350px"
HighlightCssClass
=
"highlight"
WarningIconImageUrl
=
"warning.gif"
CloseImageUrl
=
"close.gif"
/>
<
br
/>
</
asp:WizardStep
>
<
asp:WizardStep
ID
=
"WizardStep1"
runat
=
"server"
Title
=
"Identification"
>
Step 2
</
asp:WizardStep
>
<
asp:WizardStep
ID
=
"WizardStep2"
runat
=
"server"
Title
=
"Identification"
>
Final Step
</
asp:WizardStep
>
</
WizardSteps
>
<
StartNavigationTemplate
>
<
input
type
=
"button"
id
=
"btnAccept"
class
=
"hidden"
title
=
"Accept"
value
=
"Accept"
onclick
=
"return false;"
class
=
"btn"
/>
<
asp:Button
ID
=
"btnNext"
runat
=
"server"
CommandName
=
"MoveNext"
Text
=
"Next"
class
=
" btnNext"
/>
<
asp:Button
ID
=
"btnCancel"
runat
=
"server"
Text
=
"Cancel"
OnClick
=
"btnCancel_Click"
Visible
=
"false"
class
=
"btn"
CausesValidation
=
"false"
/>
<
asp:Button
ID
=
"btnSave"
runat
=
"server"
Text
=
"Submit"
OnClick
=
"btnSave_Click"
Visible
=
"false"
class
=
"btn"
/>
</
StartNavigationTemplate
>
<
StepNavigationTemplate
>
<
asp:Button
ID
=
"btnPrevious"
runat
=
"server"
CommandName
=
"MovePrevious"
Text
=
"Previous"
CausesValidation
=
"false"
class
=
"btn"
/>
<
asp:Button
ID
=
"btnNext"
runat
=
"server"
CommandName
=
"MoveNext"
Text
=
"Next"
class
=
"btn"
/>
<
asp:Button
ID
=
"btnCancel"
runat
=
"server"
Text
=
"Cancel"
OnClick
=
"btnCancel_Click"
Visible
=
"false"
class
=
"btn"
CausesValidation
=
"false"
/>
<
asp:Button
ID
=
"btnSave"
runat
=
"server"
Text
=
"Submit"
OnClick
=
"btnSave_Click"
Visible
=
"false"
class
=
"btn"
/>
</
StepNavigationTemplate
>
<
FinishNavigationTemplate
>
<
asp:Button
ID
=
"btnSubmit"
runat
=
"server"
CommandName
=
"MoveComplete"
Text
=
"Submit"
class
=
"btnNext"
/>
</
FinishNavigationTemplate
>
</
asp:Wizard
>
</
div
>
</
div
>
</
asp:Content
>
Please remove the ClienIDMode that is set to Static from the controls on the page and see how it goes.
Regards,
Maria Ilieva
Telerik
Hi Maria,
I tried this but it doesn't work - see code below. Have you been able to replicate the error aswell? Its a funny thing where the 2nd, 3rd and 4th ValidatorCalloutExtender's dont show.
<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Debug.aspx.vb" Inherits="D_Debug" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" Assembly="AjaxControlToolkit" %>
<
asp:Content
ID
=
"Content1"
ContentPlaceHolderID
=
"cphBody"
runat
=
"Server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
<
Scripts
>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.Core.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQuery.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQueryInclude.js"
/>
</
Scripts
>
</
telerik:RadScriptManager
>
<
telerik:RadAjaxManager
runat
=
"server"
ID
=
"RadAjaxManager1"
> </
telerik:RadAjaxManager
>
<
div
id
=
"checkApp"
>
<
telerik:RadTabStrip
ID
=
"rtsReports"
runat
=
"server"
Skin
=
"Outlook"
MultiPageID
=
"rnpReports"
SelectedIndex
=
"3"
>
<
Tabs
>
<
telerik:RadTab
Text
=
"Start"
SelectedCssClass
=
"SelectedTab"
/>
<
telerik:RadTab
Text
=
"Middle"
Enabled
=
"false"
SelectedCssClass
=
"SelectedTab"
/>
<
telerik:RadTab
Text
=
"Finish"
Enabled
=
"false"
SelectedCssClass
=
"SelectedTab"
/>
</
Tabs
>
</
telerik:RadTabStrip
>
<
div
id
=
"body"
>
<
asp:Wizard
ID
=
"wzdRegister"
runat
=
"server"
DisplaySideBar
=
"False"
FinishCompleteButtonText
=
"Submit"
ActiveStepIndex
=
"0"
>
<
WizardSteps
>
<
asp:WizardStep
ID
=
"wzsIdentification"
runat
=
"server"
Title
=
"Identification"
>
<
telerik:RadDatePicker
ID
=
"Expiry"
runat
=
"server"
></
telerik:RadDatePicker
>
<
asp:RequiredFieldValidator
ID
=
"rfvExpiry"
runat
=
"server"
ErrorMessage
=
"Expiry is a required field"
ControlToValidate
=
"Expiry"
Text
=
"*"
/>
<
ajaxtoolkit:ValidatorCalloutExtender
ID
=
"vcerfvExpiry"
runat
=
"Server"
TargetControlID
=
"rfvExpiry"
Width
=
"350px"
HighlightCssClass
=
"highlight"
WarningIconImageUrl
=
"warning.gif"
CloseImageUrl
=
"close.gif"
/>
<
br
/>
<
telerik:RadDatePicker
ID
=
"RadDatePicker1"
runat
=
"server"
></
telerik:RadDatePicker
>
<
asp:RequiredFieldValidator
ID
=
"RequiredFieldValidator1"
runat
=
"server"
ErrorMessage
=
"Expiry is a required field"
ControlToValidate
=
"RadDatePicker1"
Text
=
"*"
/>
<
ajaxtoolkit:ValidatorCalloutExtender
ID
=
"ValidatorCalloutExtender1"
runat
=
"Server"
TargetControlID
=
"RequiredFieldValidator1"
Width
=
"350px"
HighlightCssClass
=
"highlight"
WarningIconImageUrl
=
"warning.gif"
CloseImageUrl
=
"close.gif"
/>
<
br
/>
<
telerik:RadDatePicker
ID
=
"RadDatePicker2"
runat
=
"server"
></
telerik:RadDatePicker
>
<
asp:RequiredFieldValidator
ID
=
"RequiredFieldValidator2"
runat
=
"server"
ErrorMessage
=
"Expiry is a required field"
ControlToValidate
=
"RadDatePicker2"
Text
=
"*"
/>
<
ajaxtoolkit:ValidatorCalloutExtender
ID
=
"ValidatorCalloutExtender2"
runat
=
"Server"
TargetControlID
=
"RequiredFieldValidator2"
Width
=
"350px"
HighlightCssClass
=
"highlight"
WarningIconImageUrl
=
"warning.gif"
CloseImageUrl
=
"close.gif"
/>
<
br
/>
<
telerik:RadDatePicker
ID
=
"RadDatePicker3"
runat
=
"server"
></
telerik:RadDatePicker
>
<
asp:RequiredFieldValidator
ID
=
"RequiredFieldValidator3"
runat
=
"server"
ErrorMessage
=
"Expiry is a required field"
ControlToValidate
=
"RadDatePicker3"
Text
=
"*"
/>
<
ajaxtoolkit:ValidatorCalloutExtender
ID
=
"ValidatorCalloutExtender3"
runat
=
"Server"
TargetControlID
=
"RequiredFieldValidator3"
Width
=
"350px"
HighlightCssClass
=
"highlight"
WarningIconImageUrl
=
"warning.gif"
CloseImageUrl
=
"close.gif"
/>
<
br
/>
</
asp:WizardStep
>
<
asp:WizardStep
ID
=
"WizardStep1"
runat
=
"server"
Title
=
"Identification"
>
Step 2
</
asp:WizardStep
>
<
asp:WizardStep
ID
=
"WizardStep2"
runat
=
"server"
Title
=
"Identification"
>
Final Step
</
asp:WizardStep
>
</
WizardSteps
>
<
StartNavigationTemplate
>
<
input
type
=
"button"
id
=
"btnAccept"
class
=
"hidden"
title
=
"Accept"
value
=
"Accept"
onclick
=
"return false;"
class
=
"btn"
/>
<
asp:Button
ID
=
"btnNext"
runat
=
"server"
CommandName
=
"MoveNext"
Text
=
"Next"
class
=
" btnNext"
/>
<
asp:Button
ID
=
"btnCancel"
runat
=
"server"
Text
=
"Cancel"
OnClick
=
"btnCancel_Click"
Visible
=
"false"
class
=
"btn"
CausesValidation
=
"false"
/>
<
asp:Button
ID
=
"btnSave"
runat
=
"server"
Text
=
"Submit"
OnClick
=
"btnSave_Click"
Visible
=
"false"
class
=
"btn"
/>
</
StartNavigationTemplate
>
<
StepNavigationTemplate
>
<
asp:Button
ID
=
"btnPrevious"
runat
=
"server"
CommandName
=
"MovePrevious"
Text
=
"Previous"
CausesValidation
=
"false"
class
=
"btn"
/>
<
asp:Button
ID
=
"btnNext"
runat
=
"server"
CommandName
=
"MoveNext"
Text
=
"Next"
class
=
"btn"
/>
<
asp:Button
ID
=
"btnCancel"
runat
=
"server"
Text
=
"Cancel"
OnClick
=
"btnCancel_Click"
Visible
=
"false"
class
=
"btn"
CausesValidation
=
"false"
/>
<
asp:Button
ID
=
"btnSave"
runat
=
"server"
Text
=
"Submit"
OnClick
=
"btnSave_Click"
Visible
=
"false"
class
=
"btn"
/>
</
StepNavigationTemplate
>
<
FinishNavigationTemplate
>
<
asp:Button
ID
=
"btnSubmit"
runat
=
"server"
CommandName
=
"MoveComplete"
Text
=
"Submit"
class
=
"btnNext"
/>
</
FinishNavigationTemplate
>
</
asp:Wizard
>
</
div
>
</
div
>
</
asp:Content
>
I tested the code on my end and actually showing the extended message on the first picker only when next button is clicked is the expected behavior. You can see that after selecting a date for it the extender appears for the second one and the same is done for all pickers one by one till they become valid.
Do let me know if you are expecting different behavior.
Regards,
Maria Ilieva
Telerik