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