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

9 posts, 0 answers
  1. Blair
    Blair avatar
    16 posts
    Member since:
    Jul 2013

    Posted 27 Nov 2014 Link to this post

    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>
  2. Blair
    Blair avatar
    16 posts
    Member since:
    Jul 2013

    Posted 27 Nov 2014 in reply to Blair Link to this post

    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?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 02 Dec 2014 Link to this post

    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.

     
  5. Blair
    Blair avatar
    16 posts
    Member since:
    Jul 2013

    Posted 08 Dec 2014 in reply to Kostadin Link to this post

    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?
  6. Blair
    Blair avatar
    16 posts
    Member since:
    Jul 2013

    Posted 08 Dec 2014 in reply to Blair Link to this post

    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?
  7. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 11 Dec 2014 Link to this post

    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.

     
  8. Blair
    Blair avatar
    16 posts
    Member since:
    Jul 2013

    Posted 16 Dec 2014 in reply to Kostadin Link to this post

    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?
  9. Daniel
    Admin
    Daniel avatar
    4945 posts

    Posted 19 Dec 2014 Link to this post

    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.

     
  10. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 22 Dec 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017