Raise events on validation

Progress® Kendo UI® for jQuery Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 20 Nov 2014 19:25 by ADMIN

Stacey

Created on: 14 Sep 2013 02:24

Category: Kendo UI for jQuery

Type: Feature Request

Raise events on validation

There really needs to be some manner of an event raised when 'validateInput' and 'validate' run, that can provide meaningful feedback to hook into.

As it stands right now, it is very hard to do any kind of manipulation with the Kendo Validator. But adding even such simple lines as ..

                input.attr("aria-invalid", true); // existing kendo code
                input.trigger('invalid', [messageText, messageLabel]);

to the "validateInput" function would make it more possible to have the validator communicate with third party tools (in my situation, qTip2).

Having an event raised when validation is complete would also be very useful because it would allow other UI elements to effectively respond to it, without having to do very hokey ad-hoc manipulations.

4 comments

Stacey

Posted on: 31 Jul 2014 15:42

Yes, I can completely see that you took this advice and implemented. I'm extremely thankful. I was excited to see it.

ADMIN

Telerik Admin

Posted on: 21 Feb 2014 14:30

Indeed such an event is available already:
http://docs.telerik.com/kendo-ui/api/framework/validator#events-validate

I'm marking the request as completed, and your votes should be automatically retracted from it, per UserVoice's explanation here:
http://feedback.uservoice.com/knowledgebase/articles/51427-how-do-i-get-my-votes-back-

Stacey

Posted on: 15 Sep 2013 16:07

I did some more work with this, and I determined the appropriate lines that would need to be altered to add this support. It is extremely easy, and I simply want it to be official so that I don't have to worry about re-inserting it on new updates!

You can achieve this with only a few lines on the 'validateInput' function 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;
        },

And then again on the "validate" function..

        validate: function() {
            var that = this,
                inputs,
                idx,
                invalid = false,
                length;

            that._errors = {};

            if (!that.element.is(INPUTSELECTOR)) {
                inputs = that.element.find(INPUTSELECTOR);

                for (idx = 0, length = inputs.length; idx < length; idx++) {
                    if (!that.validateInput(inputs.eq(idx))) {
                        invalid = true;
                    }
                }

                if (invalid) {
                	that.trigger("invalid");
                }

                return !invalid;
            }

            return that.validateInput(that.element);
        },

Stacey

Posted on: 15 Sep 2013 16:07

See this thread for an example of how I used this, and why it is useful to people. 

http://www.kendoui.com/forums/kendo-ui-framework/validation/attempting-to-get-an-event-on-validation.aspx#boIY9K6aG2OF1P8AAFTdxQ