简体   繁体   中英

How to catch client side jQuery validation errors for Kendo grid?

Note: As far as my understanding is correct alternative title could be:

"How to access the jQuery validator object via client side javascript, what the the Kendo grid uses for row inline edit?"

Context

I can catch (handle) server side validation errors using datasource errors and displaying them in a notification. I would like to display all client side validation errors in a similar notification.

As in the code inhibit shows below it seems to be a standard jQuery validation. Still I do not know how to attach a handler to the existing grid.

Question

The client side validation error seems to be not triggered the datasource error event.

How can I write a handler to iterate in client side validation errors and display them in my custom way?

Additional info

Handling server side error is working by handling datasource error event However this even is not fired when "only" client side validation error occur.

Here is a field causing client side validation error:

在此处输入图片说明

Here is that field's corresponding html with the validation attributes in it:

<input class="k-textbox form-control" 
   data-val="true" 
   data-val-length="First Name should be maximum 30 characters" 
   data-val-length-max="30" 
   data-val-regex="Enter at least 3 characters. Use only alphabets and ,.'- characters" 
   data-val-regex-pattern="[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]{3,}" 
   data-val-required="The First Name field is required." 
   id="FirstName" 
   name="FirstName" 
   data-bind="value:FirstName">

I've ended the solution below. The main issue, how to access the internal jquery validator object of the Kendo grid internal inline form is solved. Further refinements are possible.

The following function attached to Kendo grid's "edit" event. I've tried use the grid's "save" or "saveChanges" event but unfortunately neither event fired if jQuery validation error occur in the inline form.

So I am using the validator's validate event itself, and bind the validate handler when the edit event occurs. (It seems the validator created on the fly for the inline form, and not reused.)

The following function attached to Kendo grid's "edit" event:

function (e) {
    var validatable = e.sender.editable.validatable;
    validatable.bind("validate", function (e) {
        var errors = e.sender.errors();
            for (var i = 0; i < errors.length; i++) {
                 // do whatever you want with errors[i]
            }
    });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM