Attempting to get an event on Validation

8 posts, 0 answers
  1. Stacey
    Stacey avatar
    55 posts
    Member since:
    Aug 2013

    Posted 02 Sep 2013 Link to this post

    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?
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 03 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Stacey
    Stacey avatar
    55 posts
    Member since:
    Aug 2013

    Posted 08 Sep 2013 Link to this post

    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.
  5. Stacey
    Stacey avatar
    55 posts
    Member since:
    Aug 2013

    Posted 08 Sep 2013 Link to this post

    And the real problem is that I don't want to get exactly when it happens, I want to get exactly _after_ it happens.
  6. Stacey
    Stacey avatar
    55 posts
    Member since:
    Aug 2013

    Posted 08 Sep 2013 Link to this post

    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.
  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 09 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Stacey
    Stacey avatar
    55 posts
    Member since:
    Aug 2013

    Posted 15 Sep 2013 Link to this post

    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)
  9. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 18 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready