Kendo Grid Custom Validation Rules Not Working

2019-09-18 05:07发布

问题:

I’m trying to use custom validation rules with a Kendo Web UI data grid but I haven’t been able to get it working. I’m able to attach a custom rule to the grid and it does get called when the user leaves the grid cell. The rule function also returns false to indicate that the input is not valid. But the error message is not displayed after deleting the name from a cell and then tabbing out. What am I missing?

JSFiddle: http://jsfiddle.net/davidsalahi/qMRBc/

var validatorRules = {
    rules: {
        // This rule is executed when leaving a cell but the return value of false doesn't display any error message or prevent leaving the cell 
        customRule1: function (input) {
            // OpCode must not be empty
            if (input.attr("name") == "ProductName") {
                return $.trim(input.val()) !== "";
            }
        }
    },
    messages: {
        customRule1: "All fields are required"
    }
};

回答1:

Create custom validation rule on your data source setting,

I have tried on your jsfiddle and worked correctly.

http://jsfiddle.net/pehlizm/qMRBc/4/

    var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
    dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: crudServiceBaseUrl + "/Products",
                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: {                   //changes starts here
                       type: "string",
                       validation: {
                                   custom: function(input) {
                                         // set the custom message
                                         input.attr("data-custom-msg", "Error");

                                          if (input.attr("name") == "ProductName") {
                                             return  $.trim(input.val()) !== "";
                                  }
                                  }
                              }
                         },                           //ends here
                    UnitPrice: {
                        type: "number",
                        validation: {
                            required: true,
                            min: 1
                        }
                    }
                }
            }
        }
    });