Kendo UI 验证器在网格中失败(消息没有消失)

问题描述

我必须验证 kendoUI 网格小部件中的一些数据.验证器组件中似乎存在错误.重现步骤:0. 打开并运行 http://jsfiddle.net/Upw9j/2/这是代码(由于 SO 限制，此处缺少某些部分):

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"
            });
        });

1. 点击任意行的编辑
2. 将光标置于 ProductName 字段，输入2s"(不带引号)，按 Tab将出现工具提示，说/^d{1,}$/"(这是一个 RE，与字段值匹配)
3. 按 Shift+Tab，输入2"(不带引号)，按 Tab，消息将消失.
4. 重复步骤 3-4 几次.经过 2-3 次迭代后，您会发现当字段包含有效值时，消息不会消失.更新"按钮行为正确.这真的是一个错误还是我做错了什么?如何解决?

推荐答案

是的，这是一个错误.我不知道官方错误跟踪页面在哪里，但这是一个论坛帖子，更准确地详细说明了正在发生的事情:网格自定义验证中的 Kendo UI 错误

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

基本上，当自定义验证输入失败时，不会更新数据源模型.因此，当您重新输入相同的(和正确的输入)时，它会检查最后一个正确的值，并且因为它是相同的，所以不会触发验证.在您的情况下，您可以验证如果每次更改数字，它仍然有效(2s -> 2 -> 2s -> 3 -> 2s -> 4 等等......这有效)

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)

您还可以直接在他们的 演示页面.再次将 Chai 更改为 Chai 到 Chai，消息仍会显示.

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 尚未修复它，我不确定是否有任何简单的修复方法.您可以尝试在验证器函数中自己更新数据模型，但这可能很糟糕，因为它使用户能够将错误输入保存到后端.

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.

这篇关于Kendo UI 验证器在网格中失败(消息没有消失)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！