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

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 (!(‘[data-isValidDate]’) ||‘[data-isvaliddate]’))) return true;

var retVal = false;

var kendoDatePicker =“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“isValidDateMsg”) === “undefined” ? typeof“isvaliddatemsg”) === “undefined” ? “Invalid Date” :“isvaliddatemsg”) :“isValidDateMsg”);

About Thiru

I'm a full stack developer and have held roles in engineering & product. Contact details Email : / website:
This entry was posted in Uncategorized. Bookmark the permalink.

1 Response to Kendo Custom Global Validator

  1. Ashish Gorana says:

    Awesome !! You saved my lots of time. Thank You 🙂

Leave a Reply to Ashish Gorana Cancel reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s