KendoUI – Validation Gotcha(s) …

While making Initial layout and architecture for the front end for our product @ Vanguard Software Group, i was trying to do POC and trying to hit all points where we going to use KendoUI.

I had came up pretty road blocker during this exercise – it was related to Loading a partial view into the application through Kendo’s Window widget.

FIRST ISSUE

The Validation doesn’t Simply work. No matter what i did, it just didn’t Budge. 

In researching the whole thing i came across multiple posts and ideas to make it work but all of them were not totally looking it deeply enough for me.

I found following:

1. http://demos.kendoui.com/web/validator/index.html
2. http://blog.janjonas.net/2011-07-24/asp_net-mvc_3-ajax-form-jquery-validate-supporting-unobtrusive-client-side-validation-and-server-side-validation
3. http://www.telerik.com/community/forums/aspnet-mvc/window/client-validation-not-working-with-window-loaded-from-form.aspx
4. http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/window/validation-problems-with-form-inside-window.aspx

Out of all those above Point # 4 had some proper half information… So took from there and fixed the issue by using the Window’s refresh method form kendo to bind it properly.

Hello Eric,

If you are using the jQuery validation then you should use the jQuery.validator.unobtrusive.parse method in the Window refresh event after the content has been loaded:

function refresh(e) {

    $.validator.unobtrusive.parse(this.element);

}

If you are using the Kendo Validator then you should initialize it on the form.

So by reading “If you are using the Kendo Validator then you should initialize it on the form.” I achieved it by doing following

LoginModule = function () {
var validator = null;
function Show() {
$(“#LayoutMain”).append(“<div id=’window’></div>”);
var window = $(“#window”);
if (!window.data(“kendoWindow”)) {
window.kendoWindow({
width: “600px”,
title: “Login”,
content: “Home/Login”, //partial View
modal: true,
resizable: false,
refresh: function () {
validator = $(“#LoginForm”).kendoValidator().data(“kendoValidator”); //do this IMPORTANT
}
});
window.data(“kendoWindow”).center();
}
};
function Submit() {
validator.validate();
};
return {
Show:
Show,
Submit:
Submit,
validator: validator
};
}();

See the BOLD lines above and follow the code.

SECOND

AND Lastly don’t FORGET to set HTML Element’s NAME attribute! If you don’t set it the Validation will also not work. Normally as coming from asp.net background i was only setting Id of the HTML element. and it was causing the validations messages to not appear.

 <input id=”Email” name=”Email” required validationMessage=”Email is required.” />

I hope this helps somebody out there 🙂

Thanks,
Riz