RadDateTimePicker Validation

[Richard]

Hello,

I have a RadDateTimePicker control that I would like to validate.  Right now if I enter junk into the field (like 'asdfasdf'), the control will alert me that there is an issue by displaying a warning image and changing the color to red.  This works great - however, I am still allowed to do a postback on the form.  I want to prevent a postback from occuring and force the user to correct their input before continuing.  I have tried setting the 'DateInput-CausesValidation' to true but this had no affect.  I've also tried adding a .NET comparison validator to the field but I get an error about setting focus when doing this.  Is it possible to prevent the postback when the input is not correct?

Thank you!
Richard

[Maria Ilieva]

Hi Richard,

Please refer to the following online demo which elaborates on validating time pickers with asp validators.
I hope this helps.

Regards,
Maria Ilieva
the Telerik team

[Marbry]

I didn't like how it was not working with the ASP.NET validator when the user entered manual input, or at least not how I wanted it to be working, so I just wrote my own.

I added a hidden input tag to the page.

<input type="hidden" id="txtInvalidControls" value="" />

I created these client script items to handle processing the events.  The TextChanged function is called from the OnBlur event of any Rad controls that need to be validated.  When OnBlur is called, the _invalid property should be set in the control.  If it is, the control ID is appended to the value of the hidden input field if not already present.  If it is not, the control's ID is removed from that list.

So that the value of that should always be a list of any control ID's containing invalid input.

The MenuItemClick only does anything when the user tries to save, but if there are still invalid controls listed it prevents the postback from occurring.

<script type="text/javascript" clientevents-onblur="TextChanged">
        function TextChanged(sender, eventArgs)
        {
            var invalidRef = document.getElementById("txtInvalidControls");
            var senderID = sender.get_id();
            if (!sender._invalid)
            {
                if (invalidRef.value.indexOf(senderID) > -1)
                    invalidRef.value = invalidRef.value.replace(senderID, "");
            }
            else
            {
                if (invalidRef.value.indexOf(senderID) == -1)
                    invalidRef.value += senderID;
            }
        }

        function MenuItemClick(sender, eventArgs)
        {
            var item = eventArgs.get_item();
            if (item.get_text() == "Save")
            {
                var invalidRef = document.getElementById("txtInvalidControls");
                if (invalidRef.value != "")
                {
                    eventArgs.set_cancel(true);
                    alert("You have invalid values, please correct these before trying to save.");
                }
            }
        }
    </script>

Then just point the OnBlur of the RadDateTimePicker's child DateInput to the TextChanged client event.

<DateInput DisplayDateFormat="M/d/yyyy" DateFormat="M/d/yyyy" ClientEvents-OnBlur="TextChanged">
                    </DateInput>

[Maria Ilieva]

Hello Marbry,

Thank you for sharing your solution.
It will definitely be very helpful for the other customers in the forum.

Kind regards,
Maria Ilieva
the Telerik team

[Enos]

Hi,

Can you please help me also, I have RadDatePicker1 and i want it to validate if a user selected the previous date..the user must
select current date or any date but not less than the current date...

Thanks for your help..

 <td class="style5">
                <telerik:RadDatePicker ID="RadDatePicker1" Runat="server" BorderColor="#669999" ErrorMessage="Date Required"  HighlightCssClass="tkpdna_req_field_highlight"
                    BorderStyle="Solid" BorderWidth="1px" Width="250px">              
                </telerik:RadDatePicker>
               <asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server" ControlToValidate="RadDatePicker1" ForeColor="Red" Display="None" SetFocusOnError="true" ErrorMessage="Date Required" ></asp:RequiredFieldValidator>
                <asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender9" runat="server" TargetControlID="RequiredFieldValidator9" Enabled="true" HighlightCssClass="tkpdna_req_field_highlight">
                </asp:ValidatorCalloutExtender>

                </td>

[Maria Ilieva]

Hello Enos,

You could simply set MinDate for the DatePicker control to be the current date like this:

protected void Page_Load(object sender, EventArgs e)
    {
        RadDatePicker1.MinDate = DateTime.Today;
    }

I hope this helps.

Regards,
Maria Ilieva
Telerik

[Jim Davis-Northrup]

I know this is an old post, but just in case anyone else comes across this ​as I did, ​here is ​the ​solution I used for this issue.  It relies on a CustomValidator with a client-side validation function, and does not require the addition of a hidden field.

The custom validator:

    <asp:CustomValidator ID="valCustDateTime" runat="server" Text="*" ErrorMessage="Please enter a valid date/time, or leave blank." ClientValidationFunction="valCustDateTime_ClientValidate"></asp:CustomValidator>

The client-side validation function:

    <script type="text/javascript" language="javascript">
        function valCustDateTime_ClientValidate(source, arguments) {
            arguments.IsValid = true;

            var radDateTime = $find("<%=radDateTime.ClientID %>");
            if (radDateTime != null)
            {
                if (radDateTime.get_textBox().value.length > 0 && radDateTime.get_selectedDate() == null)
                    arguments.IsValid = false;
            }
        }
    </script>