asp.net mvc - How to display jqueryui validation error message in jqueryui tooltip

Question

I am following this tutorial to display validation errors in jqueryui tooltip. The validation works fine, but I am unable to display the correct error messages as the correct attributes can not be conditionally linked to the tooltip, as per my example below:

$(document).tooltip({
        items: ".input-validation-error",
        content: function () {

            //debugger;
            return $(this).attr('data-val-required');
        }
    });

Only the required field error message will be displayed by this logic, is there a way to extend this logic by tapping into the validation results (for remote and compare type validations), or have I hit a dead-end?

Answer 1

Since the content() function is called on demand, you can supply whatever text you need based on the attributes of this which is the element in question.

You need to inspect the element and return the text for the validation error that occurred. Something like:

$(document).tooltip({
    items: ".input-validation-error",
    content: function () {

        //debugger;
        return $(this).attr('data-val-required') || 
               $(this).attr('data-val-date') ||
               $(this).attr('data-val-number'); // etc etc
    }
});

This will return the data validation attribute that is populated with an error message.