ASP.net MVC validation highlight and icon on incorrect fields Jquery

Question

I\'m looking for a way to change the default ASP.net MVC validation so that instead of putting a message next to each incorrect form field it would instead put an icon. I wo

Answer 1

I guess both "color: Transparent" and "background-size" requires CSS3. I was unable to hide the text without using jQuery to "snip it out". Although I read that "line-height: 0" might work too. Anyway with jQuery you can also move the text to a tooltip instead. This is my CSS:

.field-validation-error
{
    background-image: url('/Content/error.png');
    background-repeat: no-repeat;
    display: inline-block;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

And this is my jQuery code:

$(document).ready(function () {   
     $('.field-validation-error').each(function () {
         $(this).attr('title', $(this).html());
         $(this).html("")
     });
});

I guess you can do a lot more fancy stuff than a tooltip though when you first use jQuery.