Incorrect date validation message

[Brendan Vogt]

Hi,

Is there any samples for when I enter an incorrect date?  The sample just shows when a date is empty and then it displays the required error message.  But what about when an incorrect date is entered for example "2010-rtdsa2".  Then it must display something like "Incorrect Date".  Currently the date picker input box goes red.

Is it also possible to make the date picker input box disabled to prevent the user from entering a date manually?  He/she has to select a date from the icon popup.

Thanks
Brendan

[Georgi Krustev]

Hello Brendan,

Straight onto your questions:

#1:
You need to wire OnChange event in order to enter validation message into the datepicker:

function onChange(e) {
    if (e.date == undefined) {
        $(this).find('.t-input').val('Incorrect date!');
    }
}

#2:
In order to achieve desired functionality you need to disable opening of the calendar on input focus and also disable datepicker's input element. Here is a code snippet showing how to accomplish this task:

function onLoad(e) {
    var datepicker = $(this).data('tDatePicker');
    datepicker.$input.unbind('focus');
    $(this).find('.t-input')
           .attr('disabled', true)
           .end()
           .find('> .t-icon')
           .unbind('click')
           .bind('click', function () {
               if (datepicker.isOpened()) {
                   datepicker.parseDate(datepicker.$input.val());
                   datepicker.hide();
               } else {
                   datepicker.show();
               }
           });
}

Kind regards,
Georgi Krustev
the Telerik team

[Brendan Vogt]

Hi,

Thanks.  Sorry for getting back now.

How would I wire up those 2 event?  I just copied and pasted your onLoad code and it didn't work.  Will this code prevent text from being typed in all the date pickers on the view?  I have 4 date pickers on my view, I would like all 4 to be "disabled".

Just another question with regards to disabling the text from being manually captured.  On web forms when disabling a textbox then the text goes a light grey.  Will this be the case here too?  I want it to remain black if disabled.

I use data annotations on my model, and on my date property I have a Required attribute.  If the date picker is blank, and I click submit, why doesn't the required text display?  It displays in Firefox, but not in IE8.  This is what I currently have:

[Required(ErrorMessage = "Required")]
public Nullable<DateTime> SignatureDate { get; set; }

On my view I then have the following:

<%= Html.Telerik().DatePicker()
   .Name("SignatureDate")
   .ShowButton(true)
   .InputHtmlAttributes(new { @class = "textbox" })
%><br />
<%: Html.ValidationMessageFor(m => m.SignatureDate) %>

Also, lets say I type incorrect text in the date picker, then the textbox goed red.  I don't like this red because the colour is inconsistent with the rest of my other input textboxes.  Is it possible to remove this red?

Thanks
Brendan

 

[Georgi Krustev]

Hello Brendan,

You can wire up OnLoad and OnChange event like so:

[View]:

<%= Html.Telerik().DatePicker()
   .Name("SignatureDate")
   .ClientEvents(events => events.OnLoad("onLoad")
                   .OnChange("onChange"))
%>

Wire all datepickers to same event handler in order to achieve your goal:

<%= Html.Telerik().DatePicker()
   .Name("SignatureDate")
   .ClientEvents(events => events.OnLoad("onLoad")
                    .OnChange("onChange"))
%>

<%= Html.Telerik().DatePicker()
   .Name("SignatureDate2")
   .ClientEvents(events => events.OnLoad("onLoad")
                    .OnChange("onChange"))
%>
<%= Html.Telerik().DatePicker()
   .Name("SignatureDate3")
   .ClientEvents(events => events.OnLoad("onLoad")
                    .OnChange("onChange"))
%>

<%= Html.Telerik().DatePicker()
   .Name("SignatureDate4")
   .ClientEvents(events => events.OnLoad("onLoad")
                    .OnChange("onChange"))
%>

Regarding your second question, you need to add "disabled" attribute to the datepicker HTML input. Here the modified onLoad event handler, which will do the trick:

function onLoad(e) {
    var datepicker = $(this).data('tDatePicker');
    datepicker.$input
              .unbind('focus')
              .attr('disabled', true);
    $(this).find('.t-input')
           .attr('disabled', true)
           .end()
           .find('> .t-icon')
           .unbind('click')
           .bind('click', function () {
               if (datepicker.isOpened()) {
                   datepicker.parseDate(datepicker.$input.val());
                   datepicker.hide();
               } else {
                   datepicker.show();
               }
           });

Check the fifth line in the code snippet above.

Unfortunately, I am not able to reproduce described behavior regarding IE8. Check this online example, which covers same scenario.

The style which makes the input red is "t-state-error". You need to modify it in order to customize it in the way you need.

Regards,
Georgi Krustev
the Telerik team

[Brendan Vogt]

Hi,

Thanks for the answers.

Your method for the OnChange event works, but I don't want the text to display in the textbox, I need it to display the same way that it would display for my other validation messages.  I am using data annotations and I did set my view to handle client side validation.  Is this possible?

I'm not able to get client validation to trigger for IE 8, but FF works.  It's rather annoying.  What is the name of the style that makes this text red?

Brendan

[Brendan Vogt]

Hi again :)

Try and see if you can replicate the issue on your side in IE8.

I have a view model called ApplicationViewModel.  Here is the partial code:

[Required(ErrorMessage = "Date Required")]
public class ApplicationViewModel
{
   public Nullable<DateTime> SignatureDate { get; set; }
}

Put this into your view and see if the error message displays in IE 8.  Here is my view code:

<%= Html.Telerik().DatePicker().Name("SignatureDate").Value(Model.SignatureDate)%>

<%= Html.ValidationMessageFor(x => x.SignatureDate)%>

Edit:

I've uploaded a test project showing that the validation doesn't trigger.  I took it from the sample in the examples.  Can you please try and see why it doesn't want to work?

Brendan
 

[Georgi Krustev]

Hello Brendan Vogt,

I believe that the provided code sample will not compile, because class cannot be decorated with Required attibute. Here is a quote describing Required attribute usage:
The RequiredAttribute attribute specifies that when a field on a form is validated

Here is a link to the whole article which covers key points of Required attribute.

If you apply attribute to the SignatureDate field validation should work. Here is an online demo showing the suggested approach.

Regards,
Georgi Krustev
the Telerik team

[Brendan Vogt]

Sorry I only saw that now, I pasted the required text on the wrong place, it is just above the property.  I am trying to upload code for you to look at.  I created a replica of the example and it also doesn't display the text message.  How can I mail the code to you?  My work's firewall is preventing me from uploading the file.

[Georgi Krustev]

Hello Brendan Vogt,

You can use RapidShare or other free servers to upload your test project.

Greetings,
Georgi Krustev
the Telerik team

[Brendan Vogt]

Attached is the zipped solution.  Please see if you can get the validation text to display in IE 8.

EDIT: If used a separate connection but it is not showing my uploaded files.  Where do I go to see the uploaded files?

[Peter]

Hi,

I believe that you can upload only ZIP archives up to 10 MB. At least, that is the information which you can see in the Attach your files section. If you upload the file a link should appear in the beginning of your message.

Regards,
Peter

[Brendan Vogt]

Hi,

I can't upload this file, not sure what the issue is.  Try and replicate what I am about to explain.

Create a new blank MVC 2 application.  In the models directory create a class with properties like this:

public class OrderDto
{
   [Range(1, 10)]
   public int OrderID { get; set; }

   public string ContactName { get; set; }

   public string ShipAddress { get; set; }

   [Required(ErrorMessage = "Required OrderDate")]
   public DateTime? OrderDate { get; set; }
}

Create a new controller that looks like this:

public class DatePickerControllerController : Controller
{
   public ActionResult ClientValidation()
   {
      OrderDto dto = new OrderDto
      {
         OrderID = 1,
         ContactName = "Vincent",
         OrderDate = null,
         ShipAddress = "Stadhouderskade 55,\n1072 AB Amsterdam"
      };

      return View(dto);
   }
}

Create a strongly typed view that receives a OrderDto object.  The view must look like this:

<% Html.EnableClientValidation(); %>

 

<%

 

using (Html.BeginForm()) { %>
<%= Html.LabelFor(x => x.ContactName)%>

<%= Html.TextBoxFor(x => x.ContactName) %>
<%= Html.ValidationMessageFor(x => x.ContactName)%>

<%= Html.LabelFor(x => x.OrderDate)%>
<%= Html.Telerik().DatePicker().Name("OrderDate").Value(Model.OrderDate)%>
<%= Html.ValidationMessageFor(x => x.OrderDate)%>

<%= Html.LabelFor(x => x.ShipAddress)%>
<%= Html.TextAreaFor(x => x.ShipAddress) %>
<%= Html.ValidationMessageFor(x => x.ShipAddress)%>

<button class="t-button t-state-default" type="submit">Save</button>

<% } %>

Please see if you can get the date validation text to display.  I created it from the example but still can't get the date validation to trigger.  When youy are done please see if you can upload the project so that I can down load it.

I appreciate all your effort.

Brendan

[Peter]

Hi,

I am not sure if you loaded these files:

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"
></script>

But if you didn't, client validation does not work. Probably you need to check first this blog post, which shows how to enable client validation.

Regards,
Peter

[Brendan Vogt]

Yes I have all the required client side scripts.  I have included the following scripts on my master page:

MicrosoftAjax.js
MicrosoftMvcValidation.js

Try and create a sample app with what I have given you to see if it works.  I can't get it to work.

 

[Georgi Krustev]

Hi Brendan Vogt,

Attached is a simple test project which shows the correct work of the datepicker UI component with MVC client validation.

Regards,
Georgi Krustev
the Telerik team

[Brendan Vogt]

Hi there,

Thanks for the sample application.  The only difference that I see there is the following:

<%= Html.Telerik().ScriptRegistrar()
   .DefaultGroup(group => group
   .Add("MicrosoftAjax.js")
   .Add("MicrosoftMvcValidation.js")) %>

Is this required if I included these 2 script files in my master page like this?

<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcValidation.js") %>" type="text/javascript"></script>

What exactly does the script register do?

[Georgi Krustev]

Hello Brendan Vogt,

In our case:

<%= Html.Telerik().ScriptRegistrar()
   .DefaultGroup(group => group
   .Add("MicrosoftAjax.js")
   .Add("MicrosoftMvcValidation.js")) %>

this code will register "MicrosoftMvcValidation.debug.js", which is the not obfuscated version of the MicrosoftMvcValidation file.

Because of a bug in the document.getElementsByName method. we were forced to patch  _getFormElementsWithName method in order to provide correct work of our components in IE.
Unfortunately when you load "MicrosoftMvcValidation.js.js" file, our patch does not work anymore, because of the obfuscated code. We will further investigate if we can support and the obfuscated version of the MicrosoftMVCValidation file.

Currently I will suggest you register debug version of MicrosoftMVCValidation.

All the best,
Georgi Krustev
the Telerik team

[Vishal]

Thanks its working :)
No one can enter from Keyboard onlyDatePicker selection is working

disable is not working to get value from DatePicker try with readonly


 <%= Html.Telerik().DatePicker()
                        .Name("DatePickerStartDate")             
                        .Value(Model.StartDate)
                        .ShowButton(true)
                         .ClientEvents(events => events.OnLoad("onLoad")
                                 )                   
                                            
                    %>



Javascript funcation

function onLoad(e) {
    var datepicker = $(this).data('tDatePicker');
    datepicker.$input
              .unbind('focus')
              .attr('readonly', true);
    $(this).find('.t-input')
           .attr('readonly', true)
           .end()
           .find('> .t-icon')
           .unbind('click')
           .bind('click', function () {
               if (datepicker.isOpened()) {
                   datepicker.parseDate(datepicker.$input.val());
                   datepicker.hide();
               } else {
                   datepicker.show();
               }
           });

[Bill]

Hi,
I downloaded and tried your sample. The validation message on the DatePicker doens't work when it's inside a Telerik Window.

You can easily duplicate the problem by modifying Index.aspx using the code below. When you enter and invalid value or blank it out, it just turns red without the validation message. Examining the html, it's clear that HTML rendered though the Telerik Window/iFrame is different than when viewing ClientValidtion.aspx. Any idea what's going on here? I'm using an iframe so not sure why the difference.

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: ViewData["Message"] %></h2>
    <p>
        To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
    </p>

        <% Html.Telerik().Window()
       .Name("Window")
       .Title("Window title")
       .Scrollable(false)
       .Width(500)
       .Height(680)
       .Resizable()
       .Draggable(true)
       .Content(()=>       
       {
           %>
              <iframe src="<%= Url.Action("ClientValidation", "DatePicker") %>" frameborder="0" style="width: 100%; height: 100%"></iframe>
           <%
       })
       .Render();
%>
</asp:Content>

[Georgi Krustev]

Hello Bill,

I was not able to reproduce depicted issue. Check this screencast and let me know if I am missing something.

Greetings,
Georgi Krustev
the Telerik team

[Bill]

Thanks for the screencast. Although, I can't see to get it to work. Can you try reproducing it using your sample project from this thread?

http://www.telerik.com/ClientsFiles/222770_testdatepickervalidation.zip

I tried using LoadContentFrom("/DatePicker/ClientValidation") but it still doesn't work. If I go to that page directly, the validation message works fine.

[Georgi Krustev]

Hello Bill,

I have updated my test project, which is attached to this message. Everything works as expected.

Sincerely yours,
Georgi Krustev
the Telerik team

[Bill]

Thanks for repackaging. I apologize. It does work for me but only in Firefox. For some reason, the validation message does not show in IE8 when running in via Visual Studio. I'll have to investigate further.

[Bill]

Ok, I confirmed, the sample you attached shows the validation message in Firefox but not in IE8 via Visual Studio. Any clues on what might be causing this?

[Georgi Krustev]

Hello Bill,

I confirm that client validation stops to work in IFrame loaded in IE. There was a problem with client validation in IE in general, which was fixed with a patch provided in our telerik.common.js file. When page is loaded in IFrame our patch is not applied.

The workaround of this issue is to register manually MicrosoftMvcValidation.js file in the page which is loaded in the IFrame.

For your convenience I have implemented suggested approach in the test project, which is attached to this message.

All the best,
Georgi Krustev
the Telerik team