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

RadTimeInput Client-Side validation issue

4 Answers 140 Views

Input

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

Martin asked on 12 Feb 2009, 04:53 PM

[Edit: I just realized the title of the post was wrong, it should have read: "RadTimePicker Client-Side validation issue" - Feb.16, 2009]

Hi, I have an issue regarding client-side validation of RadTimeInput with CompareValidators.

The compareValidation always fails, for any value selected in the radTimePickers.
The only case where it doesn't fail, is when there is a starttime without an ending time.

It was based on the example available at:
http://www.telerik.com/help/aspnet-ajax/calendar_webpagesvalidation.html
but the DatePicker were replaced with time pickers.

Using the following code in an aspx file, it is possible to recreate this problem.

It was based on the example available at:http://www.telerik.com/help/aspnet-ajax/calendar_webpagesvalidation.html but the DatePicker were replaced with time pickers.

    
            <%@ Page Language="VB" AutoEventWireup="false" CodeFile="test3.aspx.vb" Inherits="test3" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
        
               "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title></title> 
        
            </head> 
        
            <body> 
        
                <form runat="server"> 
        
                <asp:ScriptManager runat="server"> 
        
                </asp:ScriptManager> 
        
                <asp:ValidationSummary runat="server" /> 
        
                <table bgcolor="#cccccc"> 
        
                    <tr> 
        
                        <td> 
        
                            Start: 
        
                        </td> 
        
                        <td> 
        
                            <telerik:RadTimePicker ID="StartTime" runat="server"> 
        
                            </telerik:RadTimePicker> 
        
                            <asp:RequiredFieldValidator runat="server" ID="validator1" ControlToValidate="StartTime" 
        
                                ErrorMessage="enter a starting time!" Enabled="false">    
        
                            </asp:RequiredFieldValidator> 
        
                        </td> 
        
                    </tr> 
        
                    <tr> 
        
                        <td> 
        
                            End: 
        
                        </td> 
        
                        <td> 
        
                            <telerik:RadTimePicker ID="EndTime" runat="server"> 
        
                            </telerik:RadTimePicker> 
        
                            <asp:RequiredFieldValidator runat="server" ID="validator2" ControlToValidate="EndTime" 
        
                                ErrorMessage="enter an ending time!" Enabled="false"> 
        
                            </asp:RequiredFieldValidator> 
        
                        </td> 
        
                    </tr> 
        
                    <tr> 
        
                        <td> 
        
                        </td> 
        
                        <td> 
        
                            <asp:CompareValidator ID="timeCompareValidator" runat="server" ControlToValidate="EndTime" 
        
                                ControlToCompare="StartTime" Operator="GreaterThan" Type="Date" ErrorMessage="The end time must be after the start one." 
        
                                Enabled="false"> 
        
                            </asp:CompareValidator> 
        
                        </td> 
        
                    </tr> 
        
                    <tr> 
        
                        <td colspan="2"> 
        
                            <asp:Button runat="server" Text="Submit" ID="Button1" OnClientClick="return OnClick();" /> 
        
                        </td> 
        
                    </tr> 
        
                </table> 
        
                <script type="text/javascript"> 
        
                    function OnClick() { 
        
                        ValidatorEnable(document.getElementById("<%=validator1.ClientId%>"), true) 
        
                        ValidatorEnable(document.getElementById("<%=validator2.ClientId%>"), true) 
        
                        ValidatorEnable(document.getElementById("<%=timeCompareValidator.ClientId%>"), true) 
        
                        var isValid = Page_ClientValidate(); 
        
                        ValidatorEnable(document.getElementById("<%=validator1.ClientId%>"), false) 
        
                        ValidatorEnable(document.getElementById("<%=validator2.ClientId%>"), false) 
        
                        ValidatorEnable(document.getElementById("<%=timeCompareValidator.ClientId%>"), false) 
        
                        return isValid; 
        
                    } 
        
                </script> 
        
                </form> 
        
            </body> 
        
            </html>

4 Answers, 1 is accepted

answered on 16 Feb 2009, 08:22 PM

Finally, I have resolved it using a custom validator and my own client-side javascript function. It is unfortunate that it doesn't work as it should, just as it is written in the documentation,

which says :

The RadDatePicker, RadTimePicker, and RadDateTimePicker controls can work seamlessly with standard ASP.NET validation controls.

and a bit later in the text:

A CompareValidator ensures that the second date is greater than the first one.

However, this **DOES NOT WORK** with radTimePicker.

To make sure, a start time is lower than an end time, you can use the following javascript and a custom validator. You will also have to make the comparison server-side.

Javascript:

    
            function CheckDate(sender, args) { 
        
                var beginDate = new Date($find("<%=StartTime.ClientId%>").get_selectedDate()); 
        
                var endDate = new Date($find("<%=EndTime.ClientId%>").get_selectedDate()); 
        
                args.IsValid = beginDate < endDate; 
        
            }

Aspx:

    
            <asp:CustomValidator  
        
                ControlToValidate="StartTime" 
        
                ValidateEmptyText="true" 
        
                runat="server" 
        
                ID="timeCompareValidator" 
        
                text="*"  
        
                ErrorMessage="Validation failed<br />" 
        
                Display="Dynamic" ClientValidationFunction="CheckDate"> 
        
            </asp:CustomValidator>

Accepted

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadTimeInput Client-Side validation issue

4 Answers, 1 is accepted