Kendo validator not working on text change

Question

I am using kendo controls for my project. I was using jquery validation to validate my controls at client side but as jquery validation is not working for kendo controls so I am using kendo validators to validate the controls.

I am using dataannotation validation with MVC 5 project. Here is sample dojo.

It is working perfect but the validation only appear on focus-out or blur event. Is there any way to validate control on change of value of control like jquery validation?

Update:

Here is the complete solution that helped me to resolve this issue:

if ($.validator !== undefined) {
        $.validator.setDefaults({
            ignore: [],
            highlight: function (element, errorClass) {
                element = $(element);
                var highLightElement;
                if (element.parent().hasClass("k-picker-wrap") ||
                    element.parent().hasClass("k-numeric-wrap")) {
                    highLightElement = element.parent().parent();
                }
                else if (element.parent().hasClass("k-widget")) {
                    highLightElement = element.parent();
                } else if (element.parent().children('.k-upload-empty').length > 0) {
                    highLightElement = $(element.parent().children('.k-upload-empty')[0]);
                } else {
                    highLightElement = element;
                }
                highLightElement.addClass('input-validation-error');
            },
            unhighlight: function (element, errorClass) {
                element = $(element);
                var highLightElement;
                if (element.parent().hasClass("k-picker-wrap")
                    || element.parent().hasClass("k-numeric-wrap")) {
                    highLightElement = element.parent().parent();
                }
                else if (element.parent().hasClass("k-widget")) {
                    highLightElement = element.parent();
                } else {
                    highLightElement = element;
                }
                highLightElement.removeClass('input-validation-error');
            }
        });
    }

Answer 1

You have 2 ways to meat your purpose:

Using jQuery Unobtrusive Validation with KendoUI

Background

As you know the Kendo UI Editor creates a different elements than HTML form elements. Other JavaScript editors work in a similar fashion. The actual HTML is hidden using CSS (display: none;), and therein lies the issue. By default jQuery Validation ignores hidden input fields. There are validation data-* attributes on the form elements, but since it is hidden, when the unobtrusive validation fires, the editor is ignored.

Solution

You have 2 ways to solve this issue and perfectly work with both technologies. Read the Making the Kendo UI Editor Work With jQuery Validations and if you have any problem for implementing, please read Kendo UI NumericTextBox With jQuery Validation as an example for NumericTextBox

Then, You may have problem to assign proper CSS class in case of validation. You can read adding jquery validation to kendo ui elements.

Just using KendoUI Validators

You should implement desired event for the validation purpose. Here you need onChange event to work like jQuery Unobtrusive Validation. Use the following code as it describes what to do:

$(document).ready(function () {
    function widgetChange() {
        //place validation logic
    };

    $("#dropdownlist").kendoDropDownList({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: data,
        change: widgetChange
    });
})

You may want to use both of them! So take a look at .Net Mvc 3 Trigger (other than submit button) Unobtrusive Validation

Update

A dojo for implementing with last solution which added a pattern="\d+" to search input with a validation message. The validation is called by filtering event for the same input. Note that you should use desired event based on UI element, here we used filtering for autocomplete instead of using change for DropDownList.

I recently found a new implementation which is looking good to try and test. That is available at aspnet-mvc getting-started validation