RadDateTimePicker and Required Field Validation

[Marco]

Hi,

Obviously, it is not possible to use the RadInputManager with telerik controls. In addition to that, components like RadDateTimePicker do not have a Required="True|False" attribute. Therefore, I have to deal with an ordinary asp:RequiredFieldValidator.

But how is it possible that I have the same look and feel across all my controls. I want this little warning triangle and a red border instead of an error message next to the field that is controlled by the required field validator.

Thanks in advance for any solution.

[Maria Ilieva]

Hello Marco,

In order to apply the required functionality I would suggest you to use CustomValidator instead of RequiredFieldValidator. In this case in the ClientValidationFunction of the validator you can check if the input is empty and if it is you can apply "riError" style to the input component.

I hope this helps.

Best wishes,
Maria Ilieva
the Telerik team

[Marco]

Hello Maria,

When I put a breakpoint into the javascript function, I can see that the style class is applied and the red border along with the warning traingle is shown. But when my custom validation method has returned, one of your methods seem to overwrite my className because the style disappears.

When I add an alert('Hello') to my custom code, I can see the wanted style class. But when I click the alert dialog, the warning sign disappears.

Regards.

[Marco]

Hello once again,

Finally, I made it without assigning the riError class explicitly. I just marked the appropriate dateInput field as invalid so that the riError class was assigned as usual. All I have to take care of is to follow a naming convention for the customValidator and the control to be validated.

Can you please tell me if this solution might have some drawbacks that I do not see currently?

/* Checks whether a required DateTimePicker provides an input
*/
function CheckDateRequired(source, arguments) {

    // Uses this scenario:
    //  <telerik:RadDateTimePicker ID="StartDate" runat="server" DateFormat="g" />
    //
    //  <asp:CustomValidator ID="StartDate_Required"
    //   ClientValidationFunction="CheckDateRequired" ControlToValidate="StartDate"
    //   runat="server" ValidateEmptyText="true"  />
    var controlToValidateId = source.id.replace(/_Required/g, "");
    if (arguments.Value.trim() == "") {
        $find(controlToValidateId).get_dateInput()._invalid = true;
        $find(controlToValidateId).get_dateInput().updateCssClass();
        arguments.IsValid = false;
    }
    else {
        $find(controlToValidateId).get_dateInput()._invalid = false;
        arguments.IsValid = true;
    }
}

Thank you very much in advance.
Marco

[Maria Ilieva]

Hi Marco,

Thank you for the update on this issue.

I also tested the provided suggestion on my side and it works correct for me. The code looks ok and there shouldn’t be any issues when using it in your application. I will continue testing it on my side and will let you know if any problems appear. Please do let us know if you also face some problems with it in future

Greetings,
Maria Ilieva
the Telerik team

[Mark Kucera]

Just wanted to say that i just found this solution tonight and it seems to work great.  This is exactly what i was looking for!

-Mark

[Rahul]

Hi Maria,
                      How use CustomeValidator on Date picker when date picker is empty show error message please provide sample code.

Thanks,
Rahul

[Princy]

Hi Rahul,

Please have a look into the following code snippet to achieve your scenario.

ASPX:

<telerik:RadDatePicker ID="RadDatePicker1" runat="server">
</telerik:RadDatePicker>
<asp:CustomValidator ID="CustomValidator1" runat="server" ClientValidationFunction="Validate"
    ErrorMessage="Required">
</asp:CustomValidator>
<telerik:RadButton ID="RadButton1" runat="server" Text="Validate" AutoPostBack="false">
</telerik:RadButton>

JS:

<script type="text/javascript">
    function Validate(sender, args) {
        var date = $find("<%=RadDatePicker1.ClientID %>");
        if (date.get_textBox().value == "")
            args.IsValid = false;
        else
            args.IsValid = true;
    }
</script>

Thanks,
Princy.