Using Model validation for View Model elements

[Mahesh Kumar]

Hi,

Could you please anyone advise me how can i bind model class data annotation attributes using Kendo MVVM?

I have defined the Employee model class as below,

  public class EmployeeModel
    {
        public int EmployeeId { get; set; }

        [Display(Name = "Employee Name")]
        [DataType(DataType.Text)]
        [Required(ErrorMessage = "The employee name should not be empty")]
        [StringLength(50, ErrorMessage = "The employee name should be less than 50 characters length")]
        public string Name { get; set; }

        public bool IsActive { get; set; }
    }

and i have bound this model class into view page using observable object binding. I can use HTML5 attributes for validation and validate using the below Kendo validator code, EmployeeDetails - observable object.

                               <input type="hidden" id="employeeId" data-bind="value : EmployeeDetails.EmployeeId"/>
                                Name<br />
                                <input data-bind="value: EmployeeDetails.Name" type="text" id="Name" name="Name" class="k-textbox" 
                                    placeholder="Employee name" required validationMessage="Please enter employee {0}" />
                                <div></div>
                                <span class="k-invalid-msg" data-for="Name"></span>
                             
                                <input type="checkbox" data-bind="checked: EmployeeDetails.IsActive" id="Status" />


           var validator = $("#EmployeeDetailsView").kendoValidator().data("kendoValidator");

                if (!validator.validate()) {
                    $("#Name").focus();
                    return false;
                }

Now, how can i achieve the same validation by binding the  model attributes directly to input fields with HTML5 validation attributes mentioned as above?
At the same time i have to use observable object binding for elements.

Cheers,
Mahesh

[Daniel]

Hello Mahesh,

You should use a HTML helper in order for the unbotrusive validation attributes to be rendered based on the DataAnnotation attributes. In order for the Validator to work for the unobtrusive attributes you should include the kendo.aspnetmvc JavaScript file or add custom rules to the validator that validate the input based on the attributes.

Regards,
Daniel
Telerik

[Mahesh Kumar]

Hi Daniel,

Could you please advise how can i implement unobtrusive attributes validation using kendo.aspnetmvc JavaScript file?
Please suggest with simple example?

Cheers,
Mahesh

[Daniel]

Hello Mahesh,

I attached a sample project that demonstrates using the Kendo Validator for the rules defined with the DataAnnotation attributes. 

Regards,
Daniel
Telerik

[Mahesh Kumar]

Thanks Daniel.

Cheers,
Mahesh