Show error warning in RadDateInput from Javascript

[Richard M]

Is there a way or method for displaying the error message/warning for RadDateInput1 from a Javascript function?  For example, the user does not enter a value in RadDateInput1, and my Javascript function returns dateInput.get_SelectedDate = null; return false;  - so it doesn't postback to the server.  But I would like my RadDateInput1 to show the user that they need to add/change a value by displaying the error you would normally get if you entered a value that was not a date.

[Shinu]

Helo Richard,

Attach OnError client-side event handler which is called when the input control detects that the user has tried to enter an invalid value. See the example shown below.

[ASPX]

<telerik:raddatepicker id="RadDatePicker1" runat="server">
  <DateInput>
     <ClientEvents OnError="OnError" />
  </DateInput>
</telerik:raddatepicker>

[JavaScript]

<script type="text/javascript">
function OnError(sender, eventArgs)
{
    if(eventArgs.get_reason()==1)
    {
        alert("Invalid date entered");
    }
}
 </script>

-Shinu.

[Richard M]

Is there a way that I can display the error in the RadDateInput itself, as in the attached picture, instead of a javascript alert?

[Shinu]

Hello,

By default, RadDateInput shows error icon if the date typed is invalid. And if you want to customize the appearance of the invalid style, then use the InvalidStyle property.

<telerik:RadDateInput ID="RadDateInput1" runat="server">
             <InvalidStyle BackColor="Red" />
</telerik:RadDateInput>

-Shinu.

[Richard M]

The error message does show by default if you type in an incorrect format.  But it the error message does not show if the user leaves the field blank.  I would like to show that error if they leave it blank.  Is there a way to do that in Javascript?

[Shinu]

Hello Richard,

You can use the client method _invalidate() to show the error message explicitly. Here is a sample code which shows the error invalid input when the user leaves the field blank.

JavaScript:

function OnBlur(sender, args)
   {
       if (sender.isEmpty())
      {
           sender._invalidate();
           sender.updateCssClass()
       }
   }

Shinu.

[Howard]

I can't get any of this stuff to work. Very frustrating.

[Vasil]

Hi Howard,

This markup should work for you:

<script type="text/javascript">
    function blurHandler(sender, args) {
        if (!sender.get_value()) sender.set_invalid(true);
    }
</script>
<telerik:RadDatePicker runat="server" ID="RadDatePicker1">
    <DateInput ClientEvents-OnBlur="blurHandler"></DateInput>
</telerik:RadDatePicker>

Regards,
Vasil
Telerik