Question

I have a view which accesses the data annotations contained within the model using ValidationMessageFor, and works with no problems. However, instead of displaying the validation message besides the relevant control (as standard practice), I want to display the validation message when the user hovers over a validation warning icon.

I have managed to get this partly working, but it requires the control in question has focus prior to the user clicking the validation warning icon, otherwise it displays nothing. Is it possible to retrieve the validation message via jQuery?

Model:

[Required(ErrorMessageResourceName = "EmailRequiredErrorMessage", ErrorMessageResourceType = typeof(Resources.Languages.Models.RegistrationValidateModel))]
[StringLength(60, ErrorMessageResourceName = "EmailStringLengthErrorMessage", ErrorMessageResourceType = typeof(Resources.Languages.Models.RegistrationValidateModel))]
[Display(Name = "EmailDisplayName", ResourceType = typeof(Resources.Languages.Models.RegistrationValidateModel))]
[RegularExpression(@".+@.+\..+", ErrorMessageResourceName = "EmailInvalidRegularExpressionErrorMessage", ErrorMessageResourceType = typeof(Resources.Languages.Models.RegistrationValidateModel))]
public string Email { get; set; }

View

@Html.ValidationMessageFor(m => m.Email)

Generated HTML

<input class="span12" data-val="true" data-val-length="You must enter an email address less than 60 characters long" data-val-length-max="60" data-val-regex="You must enter a valid email address" data-val-regex-pattern=".+@.+\..+" data-val-required="You must enter an email address1" id="Email" name="Email" type="text" value="" />

…

<span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>

Currently, after validation the hover fails to retrieve the error message

However, if you give the control focus and then click the validation warning icon it displays the message (albeit in a slightly different position):

Answer 1

Accessing the attribute with jQuery should work with no problem, no matter the control has the focus or not. Try

$("#Email").attr("data-val-required")