Kendo UI: Displaying server-side errors using Kendo Validator

Question

I have a web form that does client validation using Kendo Validator. Once client validation succeeds the form values are sent to a web service that does additional validation and either saves the data or sends back a JSON object of error messages keyed by form field. These field names match the data-for attributes on the validator elements. Is there a way to display these errors using Kendo Validator?

I realize you can setup a custom rule to do server-side validation per field. This is about validating all the fields at once and displaying multiple errors.

Answer 1

You can display multiple errors using AddModelError method, as desribed in this topic http://blogs.telerik.com/kendoui/posts/13-08-29/handling-server-side-validation-errors-in-your-kendo-ui-grid#adding-server-side-vaildation

Answer 2

You can attach to response event and call function which show validation errors when some errors was returned from server.

Here is javascript section which can do it:

validationMessageTemplateForReplace = kendo.template(
    '<div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; " data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">' +
    '<span class="k-icon k-warning"> </span>#=message#<div class="k-callout k-callout-n"></div></div>');

function onResponseEnd(response) {
    if (response.errors) onError(response.errors, $('#myForm'));
}

function onError(errors, element) {
    for (var error in errors) {
        addValidationMessage(element, error, errors[error].errors);
    }
}

function addValidationMessage(container, name, errors) {
    //add the validation message to the form
    var found = container.find("[data-for=" + name + "],[data-val-msg-for=" + name + "],[data-valmsg-for=" + name + "]");
    if (found.length > 0) {
        found.replaceWith(bs.validationMessageTemplateForReplace({ field: name, message: errors[0] }));
        return true;
    }

    return false;
}

Maybe this example project will be also helpfull for you. It's assiociated with grid popup editing, but shows mechanism which you want to achieve.