Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Required RadDatePicker passes validation if user navigates to new tab without leaving field

8 Answers 94 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Blair
Top achievements
Rank 1
Blair asked on 27 Nov 2014, 06:28 PM
If you have a RadDatePicker with a asp:RequiredFieldValidator and when the user clicks a different RadTabStrip it calls Page_ClientValidate, the validator returns true even if the field is blank.  However, it fails when you try to go back to the original tab causing you to never be able to fix the problem

Code below.  Steps to reproduce:

1) Blank out the date but leave the cursor in the field - do not tab out or hit enter or cause a blur() 
2) Click tab 2.  Tab 2 loads
3) Click tab 1.  Tab 1 does not load and you get a validation error "Close date is required"

I need this to work and do not know how to make it operate correctly in this case.  

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
 
<!DOCTYPE html>
 
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="Scriptmanager1" runat="server" />
        <script type="text/javascript">
            
            function ClientTabSelecting(sender, args) {
                //This is mandatory to do some other stuff.
                var isvalid = Page_ClientValidate();
                if (isvalid) {
                    //
                } else {
                    args.set_cancel(true);
                }
            }
        </script>
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" OnClientTabSelecting="ClientTabSelecting" SelectedIndex="0">
            <Tabs>
                <telerik:RadTab ID="TAB1" Text="Tab 1" runat="server" PageViewID="HeaderPage" />
                <telerik:RadTab ID="TAB2" Text="Tab 2" runat="server"  />
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">
            <telerik:RadPageView ID="HeaderPage" runat="server">
                <telerik:RadDatePicker ID="CloseDate1" runat="server" CausesValidation="True" SelectedDate="2014-11-1"></telerik:RadDatePicker>
                <asp:RequiredFieldValidator runat="server" Text="This field is mandatory" ControlToValidate="CloseDate1" ErrorMessage="Close date is required"></asp:RequiredFieldValidator>
            </telerik:RadPageView>
            <telerik:RadPageView ID="TransactionHistoryPage" runat="server">
                    You Should Never See This if the date entered is before 2014
                    <asp:Button runat="server" ID="Button1" CausesValidation="True"/>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
        <asp:ValidationSummary runat="server"  ID="summary" />
    </div>
    </form>
</body>
</html>

8 Answers, 1 is accepted

Sort by
0
Blair
Top achievements
Rank 1
answered on 27 Nov 2014, 08:02 PM
The error is that the ASP.NET required field validator is pointing at the CloseDate1 input control.  It works if it is pointing at the CloseDate1_dateInput control but this cannot be configured at design time.  This code makes it work:

$telerik.$(document).ready(function() { Page_Validators[0].controltovalidate = "CloseDate1_dateInput"; });

How can I point the validator at the correct field without resorting to jquery?
0
Kostadin
Telerik team
answered on 02 Dec 2014, 01:02 PM
Hi Blair,

You can use the following approach to validate the DateInput.
function pageLoad() {
    var id = $find("<%= CloseDate1.ClientID %>").get_dateInput().get_id();
    $get("<%= RequiredFieldValidator1.ClientID %>").controltovalidate = id;
}

Regards,
Kostadin
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Blair
Top achievements
Rank 1
answered on 08 Dec 2014, 04:51 PM
I am looking for a way to do this that does not rely on jquery or onLoad configuration changes.  I don't feel like this is an acceptable solution as I need it to work for every control, not just the one on this page.  We use windows and tabs extensively and many have dynamically created date pickers.  

Additionally, this means that the RadDatePicker control does not work with asp.net validators out of the box.  Can I raise this as a bug if there is no work around?
0
Blair
Top achievements
Rank 1
answered on 08 Dec 2014, 05:52 PM
I can't edit my post, so the last sentence should read:

Can I raise this as a bug if there is no non-jquery/onload JS work around?
0
Kostadin
Telerik team
answered on 11 Dec 2014, 02:03 PM
Hi Blair,

The reason for this behavior is that the input element is still on focus when you change the tabs and that is why the validation pass. Basically you have to blur the input element when you click the next tab. You can achieve that by using the following approach.
function ClientTabSelecting(sender, args) {
    //This is mandatory to do some other stuff.
    document.activeElement.blur();
    var isvalid = Page_ClientValidate();
    if (isvalid) {
        //
    } else {
        args.set_cancel(true);
    }
}

Regards,
Kostadin
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Blair
Top achievements
Rank 1
answered on 16 Dec 2014, 05:21 PM
Blur does not work.  Adding it to my example above does not change the behaviour.  

I am required to use IE10 due to government computer restrictions, so that might be the problem here.

Any other ideas?
0
Daniel
Telerik team
answered on 19 Dec 2014, 04:27 PM
Hello Blair,

I will need some time to investigate the problem in details. I will get back to you when I have any information about this.

Regards,
Daniel
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Vasil
Telerik team
answered on 22 Dec 2014, 12:09 PM
Hello Blair,

We have find a bug in the RadTabStrip. That causes stopping of the default event (in this case the blur of the TextBox), therefore the value of the input is not properly updated.

To fix it you can override the _mouseDown event handler of the RadTabStrip using this code:
Telerik.Web.UI.RadTabStrip.prototype._mouseDown = function(){};
And it will start to work correct.

If you want to can remove all the other workarounds and set CausesValidation=true for the TabStrip.
Here is the modified version of your original code:
<asp:ScriptManager ID="Scriptmanager1" runat="server" />
<script type="text/javascript">
 
    Telerik.Web.UI.RadTabStrip.prototype._mouseDown = function () { };
 
    function ClientTabSelecting(sender, args) {
        var isvalid = window.Page_ClientValidate();
        if (!isvalid) {
            args.set_cancel(true);
        }
    }
</script>
<telerik:RadTabStrip CausesValidation="true" ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" OnClientTabSelecting="ClientTabSelecting" SelectedIndex="0">
    <Tabs>
        <telerik:RadTab ID="TAB1" Text="Tab 1" runat="server" PageViewID="HeaderPage" />
        <telerik:RadTab ID="TAB2" Text="Tab 2" runat="server" />
    </Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">
    <telerik:RadPageView ID="HeaderPage" runat="server">
        <telerik:RadDatePicker ID="CloseDate1" runat="server" CausesValidation="True" SelectedDate="2014-11-1"></telerik:RadDatePicker>
        <asp:RequiredFieldValidator runat="server" Text="This field is mandatory" ControlToValidate="CloseDate1" ErrorMessage="Close date is required"></asp:RequiredFieldValidator>
    </telerik:RadPageView>
    <telerik:RadPageView ID="TransactionHistoryPage" runat="server">
        You Should Never See This if the date entered is before 2014
        <asp:Button runat="server" ID="Button1" CausesValidation="True" />
    </telerik:RadPageView>
</telerik:RadMultiPage>
<asp:ValidationSummary runat="server" ID="summary" />


Regards,
Vasil
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Calendar
Asked by
Blair
Top achievements
Rank 1
Answers by
Blair
Top achievements
Rank 1
Kostadin
Telerik team
Daniel
Telerik team
Vasil
Telerik team
Share this question
or