Using the Validation with qTip2

2 posts, 0 answers
  1. Amelia
    Amelia avatar
    5 posts
    Member since:
    Aug 2013

    Posted 17 Aug 2013 Link to this post

    I was wondering if it would be possible to use qTip2 to display the tooltips from the validation, instead of the default ones. I have spent several days trying to do this, with little success.

    http://qtip2.com/api

    With the jQuery Unobtrusive Validation, I can achieve this with the following edits to the code;
    function onError(error, inputElement) {  // 'this' is the form element
        var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
            replaceAttrValue = container.attr("data-valmsg-replace"),
            replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null;
     
        //replace = $.parseJSON(container.attr("data-valmsg-replace")) !== undefined;
     
        container.removeClass("field-validation-valid").addClass("field-validation-error");
        error.data("unobtrusiveContainer", container);
     
        if (replace) {
            container.empty();
            error.removeClass("input-validation-error").appendTo(container);
        }
        else {
            error.hide();
        }
     
        var element = inputElement;
        // Set positioning based on the elements position in the form
        var elem = $(element),
                            //corners = ['left center', 'right center'],
                            corners = ['bottom left', 'top center'],
                            flipIt = elem.parents('span.right').length > 0;
     
        // Check we have a valid error message
        if (!error.is(':empty')) {
            // Apply the tooltip only if it isn't valid
            elem.filter(':not(.valid)').qtip({
                overwrite: false,
                content: error,
                position: {
                    my: corners[flipIt ? 0 : 1],
                    at: corners[flipIt ? 1 : 0],
                    viewport: $(window)
                },
                show: {
                    event: false,
                    ready: true
                },
                hide: false,
                style: {
                    classes: 'qtip-red' // Make it red... the classic error colour!
                }
            })
     
            // If we have a tooltip on this element already, just update its content
            .qtip('option', 'content.text', error);
        }
     
            // If the error is empty, remove the qTip
        else { elem.qtip('destroy'); }
    }
    But I am having a difficult time figuring out how to replicate this behavior with Kendo UI.
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 21 Aug 2013 Link to this post

    Hello,

    A callback function or an event that can be used to initialize the custom tooltip is not supported. You could either specify an errorTemplate and use it to initialize the tooltip:

    <script type="text/kendo" id="errorTemplate">
        #var currentMessageGuid = kendo.guid();#
        <span message-guid="#=currentMessageGuid#">${message}</span>   
        #setTimeout(function(){#
            #$("[message-guid='" + currentMessageGuid + "']").qtip({...});#
        #})#   
    </script>
    $("#container").kendoValidator({
        errorTemplate:  $("#errorTemplate").html()
    });
    or override the code in the validateInput method. Regards,
    Daniel
    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
Back to Top