Kendo Custom Global Validator

Kendo provides the option for custom validation but when you want to do the custom validation across many pages or many sites or corporate wide we need to repeat the code multiple times.

I structured the custom code in a way that can be used via globally i.e. Define the custom code once in a separate file and just use the corresponding attribute to do the custom validation

Here is the example html

<input data-role=”datepicker” data-bind=”value: selectedDate” data-isValidDate data-isValidDateMsg=”Please enter valid date”>

Here data-isValidDate is the custom validation attribute and it is defined in a separate JavaScript file. Once it is defined and referred in a page we can start using the attribute.  So here we separated the custom validation code from the html so it can be managed better and can be used globally across pages, sites and corporate wide.

Here is the demo

http://jsfiddle.net/chandarmk/vrrq5wyu/

Here is the code in the JavaScript file

kendo.ui.validator.rules.isValidDate = function (input, params) {

//ignore all other input that doesnt have this attribute
//case insensitive
if (!(input.is(‘[data-isValidDate]’) || input.is(‘[data-isvaliddate]’))) return true;

var retVal = false;

var kendoDatePicker = input.data(“kendoDatePicker”);
if (kendoDatePicker) {
var d = kendo.parseDate(kendoDatePicker.value(), [“yyyy/MM/dd HH:mm”, “MM/dd/yyyy HH:mm”, “MMM dd, yyyy h:mm tt”, “yyyy/MM/dd”, “MM/dd/yyyy”, “MMM dd, yyyy”]);
retVal = d instanceof Date;
if (retVal) input.closest(‘.k-datepicker’).removeClass(“red-box”);
else input.closest(‘.k-datepicker’).addClass(“red-box”);
}

return retVal;
}

// enabling user to pass the custom validation message.
kendo.ui.validator.messages.isValidDate = function (input) {
return typeof input.data(“isValidDateMsg”) === “undefined” ? typeof input.data(“isvaliddatemsg”) === “undefined” ? “Invalid Date” : input.data(“isvaliddatemsg”) : input.data(“isValidDateMsg”);
}

Advertisements

About Thiru

I'm a full stack developer and have held roles in engineering & product. Contact details Email : chandarmk@yahoo.com / thiru@mavistech.com www.linkedin.com/in/thirumk website: mavistech.com W
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s