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

Validation

Validating the dates 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 dates, the second one being after the first.

We are using two RequiredFieldValidator instances to ensure the date pickers are not left empty. A CompareValidator ensures that the second date is greater than the first one.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page CodeFile="DefaultVB.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Calendar.MonthYearPicker.Validation.DefaultVB" %>

<%@ 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>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function Button1_ClientClick() {
                $get("<%= Label1.ClientID %>").innerHTML = "";
            }
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Button1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Label1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
    </telerik:RadAjaxLoadingPanel>
    <div class="demo-container size-thin" runat="server" id="containerDiv">
    <table>
        <tr>
            <td>
                <label for="RadMonthYearPicker1">Start Month:&nbsp;</label>
            </td>
            <td>
                <telerik:RadMonthYearPicker RenderMode="Lightweight" ID="RadMonthYearPicker1" Width="100%" runat="server">
                </telerik:RadMonthYearPicker>
                <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ControlToValidate="RadMonthYearPicker1"
                    ErrorMessage="Select a start month!" Text="*"></asp:RequiredFieldValidator>
            </td>
            <td rowspan="2">
                <asp:Label ID="Label1" runat="server"></asp:Label>
            </td>
        </tr>
        <tr>
            <td>
                <label for="RadMonthYearPicker2">End Month:&nbsp;</label>
            </td>
            <td>
                <telerik:RadMonthYearPicker RenderMode="Lightweight" ID="RadMonthYearPicker2" Width="100%" runat="server">
                </telerik:RadMonthYearPicker>
                <asp:RequiredFieldValidator runat="server" ID="Requiredfieldvalidator2" ControlToValidate="RadMonthYearPicker2"
                    ErrorMessage="Select an end month!" Text="*"></asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
               
                <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Save" ID="Button1" OnClick="Button1_Click"
                    OnClientClicked="Button1_ClientClick"></telerik:RadButton>
                <br />
                 <asp:CompareValidator ID="dateCompareValidator" runat="server" ControlToValidate="RadMonthYearPicker2"
                    ControlToCompare="RadMonthYearPicker1" Operator="GreaterThan" Type="Date" ErrorMessage="The second date must be after the first one.<br /><br />">
                </asp:CompareValidator>
                <asp:Panel ID="Panel1" runat="server">
                    <asp:ValidationSummary ID="ValidationSummary1" ShowSummary="true" runat="server">
                    </asp:ValidationSummary>
                </asp:Panel>
            </td>
        </tr>
    </table>
        </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance