Validation errors in tooltips , using QTip2

[AP]

I'm trying to display data validation error messages in tooltips, using the QTip2 Jquery plugin (using the method in this blog post: http://nickstips.wordpress.com/2011/08/18/asp-net-mvc-displaying-client-and-server-side-validation-using-qtip-tooltips/ )
This involves modifying the jquery.validate.unobtrusive.js onError function to the one below:-

function onError(error, inputElement) {  // 'this' is the form element
    var container = $(this).find("[data-valmsg-for='" + inputElement[0].name + "']"),
replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;

    // Remove the following line so the default validation messages are not displayed
    // 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();
    }

    /**** Added code to display the error message in a qTip tooltip ****/
    // Set positioning based on the elements position in the form
    var elem = $(inputElement),
    corners = ['left center', 'right 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: 'ui-tooltip-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'); }
}

Then another function is added, to handle the server side comments:-

$(function () {
    // Run this function for all validation error messages
    $('.field-validation-error').each(function () {
        // Get the name of the element the error message is intended for
        // Note: ASP.NET MVC replaces the '[', ']', and '.' characters with an
        // underscore but the data-valmsg-for value will have the original characters
        var inputElem = '#' + $(this).attr('data-valmsg-for').replace('.', '_').replace('[', '_').replace(']', '_');

        var corners = ['left center', 'right center'];
        var flipIt = $(inputElem).parents('span.right').length > 0;

        // Hide the default validation error
        $(this).hide();

        // Show the validation error using qTip
        $(inputElem).filter(':not(.valid)').qtip({
            content: { text: $(this).text() }, // Set the content to be the error message
            position: {
                my: corners[flipIt ? 0 : 1],
                at: corners[flipIt ? 1 : 0],
                viewport: $(window)
            },
            show: { ready: true },
            hide: false,
            style: { classes: 'ui-tooltip-red' }
        });
    });
});

This is saved as a seperate js file, and referenced into the view.

While this method works for a vanilla MVC view (using the Validation summary and validation messages), it doesn't work when using the Telerik grid, with a pop-up edit form (using an EditorTemplate). In fact, the onError function doesn't seem to get called at all.

How can I get this to work using the Grid's edit form?

Thanks

[Daniel]

Hello Andrew,

The Grid creates its on unobtrusive validator and will override the onError function so the default one will not be called. You could modify the telerik.grid.editing.js file in order to show the tool tip or use just CSS  to customize the way the validation errors are shows as demonstrated in the editing online demo.

Regards,
Daniel
the Telerik team

[AP]

Thanks, I'll try that.