RadDatePicker Required Validation using RadInputManager

[eri indrawan]

I love the "warning icon" when using RadInputManager to validate a required field, rather than the asp:RequiredFieldValidation text message. But somehow i can't validate RadDatePicker with RadInputManager.
I've been looking the solution for this but the example that i found always use asp:RequiredFieldValidation.

Could you provide an example to validate RadDatePicker with RadInputManager ?
or how can I get the "warning icon" when the RadDatePicker is required?

[Princy]

Hi,

Here is a sample code snippet I tried to achieve validation of RadDatePicker on button click. Please have a look into the following code.

ASPX:

<telerik:RadDatePicker ID="RadDatePicker" runat="server"  ></telerik:RadDatePicker>
<asp:Button ID="Button1" Text="Submit" runat="server" OnClientClick="OnClientClick(); return false;"/>

JS:

<script type="text/javascript">
    function OnClientClick()
     {
        var DatePicker = $find("<%= RadDatePicker1.ClientID %>");
        if (DatePicker.get_selectedDate() == null)
         {
            DatePicker.get_dateInput()._invalid = true;
            DatePicker.get_dateInput().updateCssClass();
         }
        else
         {
            DatePicker.get_dateInput()._invalid = false;
            DatePicker.get_dateInput().updateCssClass();
         }
    }
</script>

Hope this helps.

Thanks,
Princy.

[eri indrawan]

Hi Princy,

This workaround is works,
Thanks!

[Ivan]

ASPX:

<telerik:RadDatePicker ID="RadDatePicker1" runat="server"  ></telerik:RadDatePicker>

<asp:Button ID="Button1" Text="Submit" runat="server" ValidationGroup="Save" />

<asp:Button ID="Button2" Text="Cancel" runat="server"/>

JS:

<script type="text/javascript">

    $("form").submit(function() {

        var DatePicker = $find("<%= RadDatePicker1.ClientID %>");

        if (DatePicker.get_selectedDate() == null)

         {

            DatePicker.get_dateInput()._invalid = true;

            DatePicker.get_dateInput().updateCssClass();
                 return false;

         }

        else

         {

            DatePicker.get_dateInput()._invalid = false;

            DatePicker.get_dateInput().updateCssClass();
            return true;

         }

    });

</script>

It is my current code. but how i can add a validation group ?

[Maria Ilieva]

Hi Ivan,

I reviewed your code but I was not able to correctly understand what your exact requirements are? Could you please elaborate a bit more eon your scenario and what is the final results you are aiming.?

Greetings,
Maria Ilieva
the Telerik team

[Ivan]

Hi Maria,

I just want to add "warning icon" to RadDatePicker but using ValidationGroup

ASPX:

<telerik:RadDatePicker ID="RadDatePicker1" runat="server" ValidationGroup="Save"  ></telerik:RadDatePicker>

<asp:Button ID="ButtonSubmit" Text="Submit" runat="server" ValidationGroup="Save" />

<asp:Button ID="ButtonCancel" Text="Cancel" runat="server"/>

If I click on "ButtonSubmit", the "RadDatePicker" show the "warning icon"
but when i click "ButtonCancel", the "warning icon" not shown.
Can you provide me the valid code ?

[Maria Ilieva]

Hello,

The behaviour you are describing is expected in your case. You have set the same validation group for the RadDatePicker and the "Submit" button and no validation group for the "Cancel" button. Note that the "Cancel" button should have the same validation group in order to trigger validation for the RadDatePicker control.

Regards,
Maria Ilieva
the Telerik team

[Ivan]

Hello,

I think we have miss understanding about the requirement, the solution that Princy gave is correct.
How do i trigger the script :

<script type="text/javascript">
    function OnClientClick()
     {
        var DatePicker = $find("<%= RadDatePicker1.ClientID %>");
        if (DatePicker.get_selectedDate() == null)
         {
            DatePicker.get_dateInput()._invalid = true;
            DatePicker.get_dateInput().updateCssClass();
         }
        else
         {
            DatePicker.get_dateInput()._invalid = false;
            DatePicker.get_dateInput().updateCssClass();
         }
    }
</script>

on each RadDatePicker that has the same ValidationGroup.

Thanks,
Ivan Yanitra