This is a migrated thread and some comments may be shown as answers.

RadDateTimePicker and Required Field Validation

7 Answers 336 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Marco
Top achievements
Rank 1
Marco asked on 13 Apr 2011, 10:14 AM
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.

7 Answers, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 18 Apr 2011, 11:18 AM
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

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Marco
Top achievements
Rank 1
answered on 18 Apr 2011, 10:36 PM
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.
0
Marco
Top achievements
Rank 1
answered on 18 Apr 2011, 11:39 PM
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
0
Maria Ilieva
Telerik team
answered on 20 Apr 2011, 03:14 PM
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

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Mark Kucera
Top achievements
Rank 1
answered on 14 Dec 2013, 02:26 AM
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
0
Rahul
Top achievements
Rank 1
answered on 09 Jan 2014, 04:49 AM
Hi Maria,
                      How use CustomeValidator on Date picker when date picker is empty show error message please provide sample code.

Thanks,
Rahul
0
Princy
Top achievements
Rank 2
answered on 09 Jan 2014, 06:17 AM
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.
Tags
Calendar
Asked by
Marco
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Marco
Top achievements
Rank 1
Mark Kucera
Top achievements
Rank 1
Rahul
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Share this question
or