Kendo UI validator fails in grid (message doesn't disappear) - validation

Question

I have to validate some data in kendoUI grid widget.
Seems there is a bug in validator component.
Steps to reproduce:
0. Open and run http://jsfiddle.net/Upw9j/2/
here's the code (some part is missing here due to SO limitations):
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: {
validation: {
required: true,
productnamevalidation: function (input) {
if (input.is("[name='ProductName']") && input.val() != "") {
input.attr("data-productnamevalidation-msg", "/^\d{1,}$/");
return /^\d{1,}$/.test(input.val());
}
return true;
}
}
},
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true} }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "100px" },
{ field: "Discontinued", width: "100px" },
{ command: ["edit", "destroy"], title: " ", width: "172px"}],
editable: "inline"
});
});
Click Edit at any row
Set the cursor on ProductName field, input "2s" (without quotes), press Tab
The tooltip will appear, saying "/^d{1,}$/" (it's a RE, which is matched against field value)
Press Shift+Tab, input "2" (w/o quotes), press Tab, message will disappear.
Repeat steps 3-4 several times. After 2-3 iterations you'll find that message doesn't disappear when field contains valid value. "Update" button behaves correctly.
Is it really a bug or am I doing something wrong? How to work it around?

Answer 1

Yes, this is a bug. I don't know where the official bug tracking page is, but this is a forum thread that details more precisely what's happening: Kendo UI Error on Grid Custom Validation
Basically, when the custom validation fails the input, the datasource model is not updated. So when you re-enter the same (and correct input), it checks against the last correct value, and because it's the same, the validation doesn't fire. In your case, you can verify that if you change the numbers everytime, it still works (2s -> 2 -> 2s -> 3 -> 2s -> 4 etc... this works)
You can also reproduce the custom validation bug right on their demo page. Change Chai to chai to Chai again and the message will still show.
Telerik hasn't fixed it yet and I'm not sure of any easy fixes. You can try to update the data model yourself in the validator function, but this is potentially bad as it gives the user the ability to save bad input into your back end.
Personally (and unfortunately), I just avoided custom validation altogether and ended up using server side validation.