Attempting to get an event on Validation

[Stacey]

Hey there, I am a new Kendo UI Complete subscriber, and am having a bit of trouble with the "Validation" tool, specifically in reacting to it.

I have combed the documentation for a long time and cannot find anywhere that it shows how to subscribe to get notified when an input is validated (validateInput) or when validation has actually been performed ("validate").

I attempted to browse through the source code for this, as well, but was unable to discover anything.

I have tried simply subscribing to "validate" and "validateInput", but it seems as if there is never any kind of event triggered when these happen.

I need to be capable of responding to these behaviors, so is there anything that I can do?

[Kiril Nikolov]

Hi Stacey,

The Kendo UI Validator does not have events that are fired when the validation happens. By default the validation happens on the blur event of the control being validated, unless something else is set in the validateOnBlur configuration property. So basically binding a function to the blur event of the control, will be fired exactly when the validation happens. 
 
Regards,
Kiril Nikolov
Telerik

[Stacey]

Is it possible to get these events included in a future build? They seem really necessary to make the validation suite any use. I cannot imagine a situation where the default behavior is desired.

[Stacey]

And the real problem is that I don't want to get exactly when it happens, I want to get exactly _after_ it happens.

[Stacey]

I attempted to fix this by just adding some lines to the kendo.web.js file, at the validateInput function.

                input.trigger('invalid', [messageLabel]);

This at least gets an event when it is invalid, but I really don't see how this isn't baked into the code.

[Kiril Nikolov]

Hi Stacey,

If you think that this should be added as a feature to Kendo UI, please head to our feedback forums and submit your suggestion there, so it can be taken into consideration for a future release.
 
Regards,
Kiril Nikolov
Telerik

[Stacey]

After working on this for a bit, I have modified the kendo.web.js file to support events on validation, I'm posting my source below, and how it helped me personally. I will also paste the general event code I came up with in the "Feature Requests" part of the uservoice.

In kendo.web.js ...

validateInput: function(input) {
    input = $(input);

    var that = this,
        template = that._errorTemplate,
        result = that._checkValidity(input),
        valid = result.valid,
        className = "." + INVALIDMSG,
        fieldName = (input.attr(NAME) || ""),
        lbl = that._findMessageContainer(fieldName).add(input.next(className)).hide(),
        messageText;

    input.removeAttr("aria-invalid");

    if (!valid) {

        messageText = that._extractMessage(input, result.key);
        that._errors[fieldName] = messageText;
        var messageLabel = parseHtml(template({ message: decode(messageText) }));

        that._decorateMessageContainer(messageLabel, fieldName);

        if (!lbl.replaceWith(messageLabel).length) {
            messageLabel.insertAfter(input);
        }
        messageLabel.show();

        input.attr("aria-invalid", true);
        // raise an input specific invalid event, so that things that
        // need to simply be aware when the input is invalid can react
        input.trigger('invalid', [valid, messageText, messageLabel]);
    }

    // raise a general input validate event that is not dependant on
    // the actual validation result, so that events can be designed to
    // react in line if they wish to.
    input.trigger('validate', [valid, messageText, messageLabel]);

    // raise a specific 'valid' event so that things that need to
    // react only when the input is valid can do so.
    if (valid) { input.trigger('valid', [valid, messageText, messageLabel]); }

    input.toggleClass(INVALIDINPUT, !valid);

    return valid;
},

This gives us three new events for "input" - invalid, valid, and validate. Though "validate" covers everything, I ran into a case where I wanted
to be alerted when it was invalid, or valid, so I threw them in there.

In my code, I am using them something like this ..

$('input').each(function (e) {
    // create an intricate selector for the error message that is generated
    // by this specific situation.
    var selector = ".input-control[data-for='{0}']".format($(this).attr("name"));

    // we have the error message, so the tooltip only needs that,
    $(selector).qtip({
        content: $(this).data('message'),
        hide: {
            event: 'valid',
            fixed: true
        },
        style: {
            tip: {
                width: 35,
                height: 8
            },
            classes: 'qtip-red qtip-shadow'
        },
        position: {
            my: 'center left',
            at: 'center right'
        },
        show: {
            event: 'invalid'
        }
    });
});

$('input').on('validate', function (events, valid, messageText, messageLabel) {
    // attempt to find any validation widget that matches this input,
    // this is used in situations where we need to style things that
    // do not inheritly receive the 'invalid' style
    var widget = "span[data-validation-widget='{0}']".format($(this).attr("name"));

    // toggle the validation rules to make sure that the widget properly displays
    // the styling we want it to have.
    $(widget).toggleClass("invalid", !valid);
});

What this allowed me to do was to override the default HTML5 and Kendo Validator tooltips, and I replaced them with qTip2. I had to
make a small adjustment by adding "data-validation-widget" to the HTML of the input that needed the tooltip (to make sure that
the tooltip had a visible object to attach itself to)

[Kiril Nikolov]

Hello Stacey,

I am glad that you found a solution for your specific case and shared it with. 

Thank you very much for your cooperation.
 
Regards,
Kiril Nikolov
Telerik