After Input goes Invalid in HTML5 set error message and prevent default error message from kendo in a grid

Question

I stuck with the inline validation in the kendo grid.

I don't want to validate after losing focus. I want to validate immediately after typing. So I start using the HTML validator. It works pretty well but the problem is I cant answer these two questions:

which event set the input from valid to invalid.

which event displays the error message.

My Current work: https://dojo.telerik.com/OSONo/56

Answer 1

Solved my Problem on my Own. I will edit the post so you can see what i mean but first i just give the dojo projcet.

https://dojo.telerik.com/OSONo/64

my edit:

I am sorry for my previous anwser, i just want to give him my solution i mention in my comment.

In my solution i created an event listener, how listen to all input elements. When something has changed it, saves the current cursor position (its import for ie support) and after this it trigger my "change" event. The "change" event check if it is valid or invalid. If it is invalid the kendo validator shows imidently the error-message (not as default by a blur event).

    var ValidierungCheckClass = (function () {
return {
    AllDOMElements: function () {
        $('body').on('input', function () {
            var myActiveElement = $(':focus');

            if ((myActiveElement) && (myActiveElement.context.activeElement.nodeName.toLowerCase() !== "body")) {
                var myActiveDOMElement = myActiveElement[0],

                   start = myActiveDOMElement.selectionStart, //just for IE Support
                   end = myActiveDOMElement.selectionEnd;           //just for IE Support

                myActiveElement.trigger("change");

                myActiveDOMElement.setSelectionRange(start, end); //just for IE Support

            }
        })
    }
    }
});

The change event is allready created from kendo so you dont have to write your own.

At least you have to call the method when creating the website.

<script>
        ValidierungCheckClass().AllDOMElements();
</script>

This is my Solution to my problem.

best regards.

Answer 2

which event set the input from valid to invalid.

...

which event displays the error message.

Just run your kendoValidator with validator.validate(); The error messages are also set with validate().

Something like this should work:

$(document).on('input propertychange', function() {
    validator.validate();
});

The warning seems to be hidden behind some elements, so you can also add the folowing errorTemplate to your kendoValidator:

errorTemplate: '<div class="k-widget k-tooltip k-tooltip-validation" style="margin: 0.5em; display: block;"><span class="k-icon k-i-warning"></span>#=message#<div class="k-callout k-callout-n"></div></div>'

And the whole solution: https://dojo.telerik.com/OSONo/66