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 correc

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.

Answer 2

Using the tutorial referenced in the original question, change line 4 from:

@{ Html.ValidateFor(m => m.UserName); }

to:

@Html.ValidationMessageFor(m => m.Username, null, new {style="visibility:hidden"})

Then, modify the content function as follows:

$(document).tooltip({
    items: ".input-validation-error",
    content: function () {
        return $("[data-valmsg-for='" + $(this).attr('id') + "']").text();
    }
});

Essentially, we don't want the original ValidationMessageFor span displaying (visibility=hidden). We're simply using it as the container for the tooltip.