This is a migrated thread and some comments may be shown as answers.

Validation errors in tooltips , using QTip2

2 Answers 46 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
AP
Top achievements
Rank 1
Veteran
AP asked on 09 Jul 2012, 10:49 AM
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

2 Answers, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 12 Jul 2012, 10:57 AM
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
Check out the successor of Telerik MVC Extensions - Kendo UI for ASP.NET MVC - and deem it for new ASP.NET MVC development.
0
AP
Top achievements
Rank 1
Veteran
answered on 13 Jul 2012, 12:00 PM
Thanks, I'll try that.
Tags
Grid
Asked by
AP
Top achievements
Rank 1
Veteran
Answers by
Daniel
Telerik team
AP
Top achievements
Rank 1
Veteran
Share this question
or