How to display jqueryui validation error message i

问题:

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?

回答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.

回答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.