validation of datepicker

8 posts, 0 answers
  1. santosh
    santosh avatar
    1 posts
    Member since:
    Sep 2008

    Posted 08 Jun 2009 Link to this post

    Hi

    I am new to datepicker control. I am able to do all other operations with it. can any one tell me how to validate the content entered in it.
    I want to associate a regular expression to it so that client side validation disable the postback till a valid value is entered. I don't want to use a required field validator as the field is not mandatory in my case.

    Any pointers to this will be greately appreicated.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 08 Jun 2009 Link to this post

    Hi Santosh,

    You may use custom logic to validate the date when handling OnError  Client event.

    ASPX:
     
     <telerik:RadDatePicker ID="RadDatePicker1" runat="server"
              <DateInput runat="server" > 
                <ClientEvents  OnError="ShowError" /> 
              </DateInput> 
            </telerik:RadDatePicker> 

    JS:
    <script type="text/javascript">  
     
    function ShowError(sender, args) 
     alert ("Enter a Valid Date in MM/DD/YYYY Format"); 
     sender.focus();  
     
     
    </script> 


    Thanks
    Shinu
  3. Asif Mohazin
    Asif Mohazin avatar
    1 posts
    Member since:
    May 2009

    Posted 16 Jul 2009 Link to this post

    Hi,

    I also have the same problem. My requirement is to postback on date change. For this I have set the autopostback property to true.
    But when I enter an invalid date, it should not postback and should show a message.

    Your implementation helps only to show the message. It is not avoiding the postback. Any solution to this problem ?

    Regards
    Asif
  4. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 16 Jul 2009 Link to this post

    Hello Asif,

    You can modify the OnError client event handler in the following way in order to prevent the postback when the user input is not valid:

    <telerik:RadDatePicker ID="RadDatePicker1" runat="server">    
              <DateInput runat="server" >    
                <ClientEvents  OnError="ShowError" />    
              </DateInput>    
            </telerik:RadDatePicker>    
     

    <script type="text/javascript">  
                            function ShowError(sender, eventArgs) {  
                                sender._invalidate();  
                                sender.updateCssClass();  
                                  
                                var evt = eventArgs.get_domEvent();  
                                  
                                evt.cancelBubble = true;  
                                evt.returnValue = false;  
     
                                if (evt.stopPropagation) {  
                                    evt.stopPropagation();  
                                    evt.preventDefault();  
                                }  
                            }  
                        </script> 

    Also verify that you are using the latest version 2009.2.701 of RadControls for ASP.NET AJAX in your project.

    Best regards,

    Sebastian
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Jason
    Jason avatar
    4 posts
    Member since:
    Jun 2009

    Posted 03 Dec 2009 Link to this post

    Hi Sebastian,

    I have tried the code that you listed above but unfortunately am running into an issue.  After typing in "asdfasdf" into the RadDatePicker, then tabbing out, a javascript error is being thrown on this line:  

        var evt = eventArgs.get_domEvent();  

    It appears that 'get_domEvent()' is not a valid function to be called on eventArgs.  Using Visual Studio to JavaScript debug, 'get_domEvent()' is not one of the methods available when you do a watch on 'eventArgs'.

    I am using the Q3 2009 ASP.NET AJAX suite.  Can you help me understand if I am doing something wrong?  Thanks!
    --Jason
  6. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 08 Dec 2009 Link to this post

    Hello Jason,

    Indeed you are right and please excuse me for the inconvenience this might caused you, The following code modification should produce the desired result (I tested it under IE, FireFox, Google Chrome and Safari for Windows):

    <script type="text/javascript">   
                function ShowError(sender, eventArgs) {   
                    sender._invalidate();   
                    sender.updateCssClass();   
                }   
                function Blur(evt)
                {
                   if(evt)
                   {
                     evt.cancelBubble = true;   
                     evt.returnValue = false;   
                     if (evt.stopPropagation) {   
                        evt.stopPropagation();   
                        evt.preventDefault();   
                     }
                    }  
                }
                  
            </script>  
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
        <DateInput ID="DateInput1" runat="server" AutoPostBack="true" onblur="Blur(event)">
            <ClientEvents OnError="ShowError" />
        </DateInput>
    </telerik:RadDatePicker>

    Kind regards,
    Sebastian
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  7. TonyG
    TonyG avatar
    239 posts
    Member since:
    Feb 2006

    Posted 06 Feb 2010 Link to this post

    I'm also having problems in this area.  The code that Sebastian provided isn't helping because even the second version seems to be in error. With regard to: 
    <DateInput ID="DateInput1" runat="server" AutoPostBack="true" onblur="Blur(event)">
            <ClientEvents OnError="ShowError" />

    DateInput doesn't have an onblur event.  Perhaps he meant:

    <DateInput ID="DateInput1" runat="server" AutoPostBack="true">
            <ClientEvents OnError="ShowError" OnBlur="Blur(event)" />

    But even that wasn't working with the JS provided. So I tried this:
    function DateInputError(sender, args) {  
      switch (args.get_reason()) {  
        case Telerik.Web.UI.InputErrorReason.ParseError:  
          args.set_cancel(true);  
          // do more here if you wish  
          break;  
        case Telerik.Web.UI.InputErrorReason.OutOfRange:  
          args.set_cancel(true);  
          // do more here if you wish  
          break;  
      }  
    That actually does stop the postback.  (Finding documentation for this stuff is extremely tough.)

    It would be interesting to learn how that is different from the ._invalidate() and .stopPropagation() technique.

    Since we're here - a real problem I'm fighting now is that pressing tab from the DateInput properly causes validation to process, but pressing Enter for some reason presses a button in a user control that's on the page.  What in blazes?!  Do we need to intercept keypresses in DateInput and do something to handle char 13?  Is there a bug in there?  I'm using the latest production build.

    Thanks.





  8. TonyG
    TonyG avatar
    239 posts
    Member since:
    Feb 2006

    Posted 06 Feb 2010 Link to this post

    The solution to my problem with the button is that the button's UseSubmitBehavior was set to True.

    I found this after I had created a sample solution for Telerik to reproduce the issue and I was documenting exactly how to reproduce the issue in a support ticket (and no, I didn't post the ticket).  Funny how things work out like that.

Back to Top