validation of datepicker

[santosh]

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.

[Shinu]

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

[Asif Mohazin]

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

[Sebastian]

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.

[Jason]

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

[Sebastian]

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.

[TonyG]

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.

[TonyG]

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.