[Solved] Client Validation for Date Picker does not work as expected

[Frank Michael]

See the attachment. Yes - it becomes red. Good.
But I am missing the message.
See the rendered html.
This is my code:

<%@ Control Language="C#" Inherits="WorkstreamPlatform_WebRole.Views.PlatformDatePicker"
CodeBehind="PlatformDatePicker.ascx.cs" AutoEventWireup="true" %>

<%var model = (PlatformDatePicker)Model; %>
<tr>
    <td><%= Html.Label(model.name)%></td>
    <td>
        <%= Html.Telerik().DatePicker()
            .Name(model.name)
            //.HtmlAttributes(new { id = ViewData.TemplateInfo.HtmlFieldPrefix + DateTime.Now.Millisecond.ToString() })
                .HtmlAttributes(new { @class = "date-picker t-input" })
        .Value(model.value > DateTime.MinValue ? model.value : DateTime.Today)
        %>
    </td>
    <td><span class="error"><%= model.message%></span></td>
</tr>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Edit</h2>

    <%--<%= Html.ValidationSummary("Edit was unsuccessful. Please correct the errors and try again.") %>--%>

    <% Html.EnableClientValidation(); %>

    <%using (Html.BeginForm<SprintController>(c => c.Edit(Model.sprint.RowKey), FormMethod.Post))
      { %>

        <fieldset>

            <legend>Sprint</legend>

            <table>
                <%=Html.PlatformTextBoxFor(m=>m.sprint.Title) %>
                <%=Html.PlatformDatePickerFor(m=>m.sprint.Date) %>
                <%=Html.PlatformTextAreaFor(m=>m.sprint.Description) %>
            </table>

        </fieldset>

    <%=Html.PlatformPostButton("Submit","Submit") %>

<%} %>

</asp:Content>

public static MvcHtmlString PlatformDatePickerFor<TModel>(this HtmlHelper<TModel> instance, Expression<Func<TModel, DateTime>> selector)
        {
            var viewModel = new PlatformDatePicker();

            var func = selector.Compile();

            viewModel.name = instance.NameFor(selector).ToString();
            viewModel.value = func(instance.ViewData.Model);
            viewModel.message = instance.ValidationMessageFor<TModel, DateTime>(selector).ToString();

            var result = instance.PartialFor<PlatformDatePicker>(viewModel);

            return result;
        }

[Atanas Korchev]

Hi Frank Michael ,

This is by design. The datepicker does not show any validation message by itself. If you want to show validation error messages you should decorate your model with the appropriate validation attributes.

Greetings,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Frank Michael]

I declared it like this:

        [DataType(DataType.Date,ErrorMessage="Wrong Date Format."), Required]
        public DateTime Date {get; set;}

And this Is the error message I get from server side validation:

Sorry, an error occurred while processing your request.

Action was unsuccessful. Please correct the errors and try again.

• Der Wert "xxx" ist für "Date" nicht gültig.

So validation it itself works. But not client side.

[Atanas Korchev]

Hi Frank Michael ,

Does it work with a regular TextBox? If it does not then it may not be supported by ASP.NET MVC validation at all.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Frank Michael]

No - it does not work for Textbox as well.

According to the examples I wrote this into the page:

<% Html.EnableClientValidation(); %>

This should do it? Or is more necessary?

[Frank Michael]

Also this is my ScriptManager

Html.Telerik().ScriptRegistrar()
                     .Globalization(true)
                     .DefaultGroup(group => group
                         .Add("WorkstreamPlatform.js")
                         .Add("Silverlight.js")
                         .Add("Silverlight-OnError.js")
                         .Add("telerik.common.js")
                         .Add("telerik.panelbar.js")
                         .Add("telerik.calendar.js")
                         .Add("telerik.menu.js")
                         .Add("jquery.validate.js")
                         .Add("MicrosoftMvcAjax.js")
                         .Add("MicrosoftMvcJQueryValidation.js")
                    )
                     .Render();

It is not exactly the same as in your example:

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

I do not have MicrosoftMvcValidation.js, there fore I took MicrosoftMvcJQueryValidation.js, hoping that it is nearly the same. Probably I should try MircosoftAjax.js instead of MicrosoftMvcAjax.js - though I do not understand why.

[Atanas Korchev]

Hi Frank Michael ,

Since ASP.NET MVC Validation falls beyond Telerik Extensions for ASP.NET MVC I suggest you check the available resources in the net: http://www.asp.net/mvc/tutorials#Validation

Greetings,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Frank Michael]

I included MicrosoftAjax.js also, but it does not work.
How does it work, though? Maybe I could debug and see what is missing?
I see that this is rendered:

<span class="error"><span id="sprint_Date_validationMessage" class="field-validation-valid"></span></span>

And I see this:

function __MVC_CreateRulesForField(validationField) {
80 var validationRules = validationField.ValidationRules;
81
82 // hook each rule into jquery
83 var rulesObj = {};
84 for (var i = 0; i < validationRules.length; i++) {
85 var thisRule = validationRules[i];
86 switch (thisRule.ValidationType) {
87 case "range":
88 __MVC_ApplyValidator_Range(rulesObj,
89 thisRule.ValidationParameters["minimum"], thisRule.ValidationParameters["maximum"]);
90 break;
91
92 case "regularExpression":
93 __MVC_ApplyValidator_RegularExpression(rulesObj,
94 thisRule.ValidationParameters["pattern"]);
95 break;
96
97 case "required":
98 __MVC_ApplyValidator_Required(rulesObj);
99 break;
100
101 case "stringLength":
102 __MVC_ApplyValidator_StringLength(rulesObj,
103 thisRule.ValidationParameters["maximumLength"]);
104 break;
105
106 default:
107 __MVC_ApplyValidator_Unknown(rulesObj,
108 thisRule.ValidationType, thisRule.ValidationParameters);
109 break;
110 }
111 }
112
113 return rulesObj;
114}
115
116function __MVC_CreateValidationOptions(validationFields) {
117 var rulesObj = {};
118 for (var i = 0; i < validationFields.length; i++) {
119 var validationField = validationFields[i];
120 var fieldName = validationField.FieldName;
121 rulesObj[fieldName] = __MVC_CreateRulesForField(validationField);
122 }
123
124 return rulesObj;
125}
126
127function __MVC_EnableClientValidation(validationContext, userState) {
128 // this represents the form containing elements to be validated
129 var theForm = $("#" + validationContext.FormId);
130
131 var fields = validationContext.Fields;
132 var rulesObj = __MVC_CreateValidationOptions(fields);
133 var fieldToMessageMappings = __MVC_CreateFieldToValidationMessageMapping(fields);
134 var errorMessagesObj = __MVC_CreateErrorMessagesObject(fields);
135
136 var options = {
137 errorClass: "input-validation-error",
138 errorElement: "span",
139 errorPlacement: function(error, element) {
140 var messageSpan = fieldToMessageMappings[element.attr("name")];
141 $(messageSpan).empty();
142 error.removeClass("input-validation-error");
143 error.attr("_for_validation_message", messageSpan);
144 error.appendTo(messageSpan);
145 },
146 messages: errorMessagesObj,
147 rules: rulesObj,
148 success: function(label) {
149 var messageSpan = $(label.attr("_for_validation_message"));
150 $(messageSpan).empty();
151 }
152 };
153
154 theForm.validate(options);
155}

But none of the breakpoints is hit.

[Frank Michael]

Yea - i know these tutorials.
But there is nothing about client side validation.
I want to activate client side validation, because it neatly fits into the telerik javascript controls and you have it in your samples as well.
I am not saying, that it is a programming error on the telerik side.
Probably I am only missing a small piece, but I need some help to find it.

[Frank Michael]

As an additional information I find, that client side validation works within the grid.
So MvC client side validation in itself works.
But still the client side validation for the date picker and the textbox in the form does not work.

[MakeMedia]

Hi Frank, 

Ran into the same problem myself and the Telerik examples have the issue too. 

The trick seems to be that the required attribute works fine but the data type attribute for date does not - as mentioned by  The trick seems to be that the required attribute works fine but the data type attribute for date does not - as mentioned by Atanas.

My strategy has been to drop back to using the regular expression attribute.

Might be worth putting these in place on the examples as most people will want to validate aginast correctness aswell as presence with date time fields. 

Hope this helps someone! 

PS - please note that the regex is only for date (not date time) and only does a very loose check. For illustrative purposes only!

//[DataType(DataType.Date, ErrorMessage = "The concession start date must be a valid date (dd/mm/yyyy)")] // This does not work
[RegularExpression(@"^\d{1,2}/|-\d{1,2}/|-\d{4}$", ErrorMessage = "The concession start date must be a valid date (dd/mm/yyyy)")] // This works
[Required(ErrorMessage = "You must enter a date")] // This works too
public DateTime? ConcessionStartDate { get; set; }