How can I apply Kendo UI validations with Entity class Data Annotations?

[Haidar]

How can I apply Kendo UI validations with Entity class Data Annotations?

I want to utilize my Validation messages defined with my Model classes. I love to use Kendo UI Validations but I am struggling to implement my ViewModel entity class data annotations. 

Please show/refer some demos of this problem's solution.

Regards,
Haidar

[johnsk]

One more vote on board wondering about same thing, and would be just great for a sample to be provided by Kendo dream team :-)

[preet]

Seriously Telerik team wants traditional asp.net mvc developers to go for Kendo, they should provide a proper example of how Kendo UI and framework fits with KendoUI asp.net mvc extensions. I want to start using it but lack of any meaningful example is really holding me up.

[Neil]

Hi,

I'm using release version 2012.2.913 and the only data annotation that I've found so far that hasn't been working for me is the [EmailAddress] one which is a pain (at least for setting invalid email validation message) apart from that just adding the attributes to my view models and adding @Html.ValidationMessageFor() to the view does the trick (assuming you have the following settings in your web.config:    
 
<add key="ClientValidationEnabled" value="true" /> 
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

and have included the following files:
jquery.validate
jquery.validate.unobtrusive
kendo.aspnetmvc.min
kendo.web.min
kendo.validator.min

then this will work:

[View]

 <div class="editor-row">
     <div class="editor-label">@Html.LabelFor(m => m.FirstName)</div>
       <div class="editor-field">
             @Html.TextBoxFor(m => m.FirstName, new { @class="k-textbox", @placeholder="enter first name" })
             @Html.ValidationMessageFor(m => m.FirstName)
       </div>
 </div>

  $(document).ready(function () {
            //add kendo validator to page
            window.validator = $("#newPersonForm").kendoValidator().data("kendoValidator");
  });

Model:
        [Display(Name = "First Name:")]
        [Required(ErrorMessage = "first name required")]
        public string FirstName { get; set; }

Which Data Annotation(s) are you having trouble with?

Thanks,

Neil.

[Robert]

Converted
@Html.EditorFor(model => model.SageCustomerNumber)

to
<input id="SageCustomerNumber"
data-bind="value:SageCustomerNumber"
data-value-field="SageCustomerNumber"
data-text-field="SageCustomerNumber"
style="width: 205px"/>

The new input is bound to an kendoAutoComplete element. Using the EditorFor the data annotations worked, now using the kendoAutoComplete the validation is not firing. Any suggestions??

[Daniel]

Hello Robert,

You could use the TextBoxFor helper so that the validation attributes are applied to the input. The binding attributes can be set as parameter e.g.

@Html.TextBoxFor(m=> m.FirstName, new {
    data_bind="value:SageCustomerNumber",
    data_value_field="SageCustomerNumber",
    data_text_field="SageCustomerNumber",
    style = "width: 205px"
            })

Regards,
Daniel
the Telerik team