New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

    Validation

    Validating the times picked by the user can be done by using the standard ASP.NET validator controls. This example shows a sample period selection page. The user has to enter two time entries.
    We are using two RequiredFieldValidator instances to ensure the date pickers are not left empty.
    Additionally, a custom validator is used to validate that the second time value is greater than the first. In this specific instance, the most straightforward approach would have been to use Range/Compare validators. However, they both only cater for handling values of type Date. In this case, we would need to match the time fraction of the date, and hence a more flexible approach has been used, by coupling a CustomValidator with some client script logic.
    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    <%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Calendar.DateTimePicker.Validation.DefaultCS" %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html>
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <telerik:RadScriptBlock runat="server" ID="RadCodeBlock1">
            <script type="text/javascript">
                //<![CDATA[
                var RadTimePicker1;
                var RadTimePicker2;
     
                function validate(sender, args) {
                    var Date1 = new Date(RadTimePicker1.get_selectedDate());
                    var Date2 = new Date(RadTimePicker2.get_selectedDate());
                    args.IsValid = true;
                    if ((Date2 - Date1) < 0) {
                        alert("The second time value should be greater than the first!");
                        args.IsValid = false;
                    }
                }
     
                function onLoadRadTimePicker1(sender, args) {
                    RadTimePicker1 = sender;
                }
     
                function onLoadRadTimePicker2(sender, args) {
                    RadTimePicker2 = sender;
                }
                //]]>
            </script>
        </telerik:RadScriptBlock>
        <div class="demo-container size-thin" runat="server" id="containerDiv">
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
                <table>
                    <tr>
                        <td>Start Time&nbsp;
                        </td>
                        <td>
                            <telerik:RadTimePicker RenderMode="Lightweight" Width="100%" ID="RadTimePicker1" runat="server">
                                <DateInput ID="DateInput1" runat="server">
                                    <ClientEvents OnLoad="onLoadRadTimePicker1"></ClientEvents>
                                </DateInput>
                            </telerik:RadTimePicker>
                            <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ControlToValidate="RadTimePicker1"
                                ErrorMessage="Enter a date!"></asp:RequiredFieldValidator>
                        </td>
                        <td rowspan="2">
                            <asp:Label ID="Label1" runat="server"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td>End Time&nbsp;
                        </td>
                        <td>
                            <telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker2" Width="100%" runat="server">
                                <DateInput ID="DateInput2" runat="server">
                                    <ClientEvents OnLoad="onLoadRadTimePicker2"></ClientEvents>
                                </DateInput>
                            </telerik:RadTimePicker>
                            <asp:RequiredFieldValidator runat="server" ID="Requiredfieldvalidator2" ControlToValidate="RadTimePicker2"
                                ErrorMessage="Enter a date!"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <asp:CustomValidator ID="CustomValidator1" EnableClientScript="true" runat="server"
                                ControlToValidate="RadTimePicker2" ClientValidationFunction="validate">
                            </asp:CustomValidator>
                            <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Save" ID="Button1" OnClick="Button1_Click"></telerik:RadButton>
                        </td>
                    </tr>
                </table>
            </telerik:RadAjaxPanel>
        </div>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance