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.

Answer 2

Actually, reimplementing all the client-validation stuff would be not the best idea. So, I will show you some simple "hack" approach. This may help you.

Default validation places .field-validation-error class on the generated error-text-container spans. So, let's style that span to our needs

.field-validation-error
{
    background-image: url('http://findicons.com/files/icons/1014/ivista/128/error.png');
    background-repeat: no-repeat;
    color: Transparent;
    background-size: 16px 16px;
}

This makes span text contents dissapear and instead places background-image in there. This gives pretty close visual behavior to one you need.

This is the exact output given from above css.

Answer 3

Try this. I use .input-validation-error and .input-validation-error:focus:

.input-validation-error, .input-validation-error:focus {
    background-image: url('http://findicons.com/files/icons/1014/ivista/128/error.png');
    background-repeat: no-repeat;
    background-position-x:right;
    border:1px solid #ff0000 ;
    box-shadow: inset 0px 0px 3px #ff0000;
    color: Transparent;
    background-size: 16px 16px;
}

This applies the icon to the input control, adds a red border and shadow that is inset while preserving the validation message. Here is the result I get:

Answer 4

Given the accepted answer, if you want to keep the original error message, just take out the transparent line and add a padding:

.field-validation-error
{
    background-image: url('http://findicons.com/files/icons/1014/ivista/128/error.png');
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding-left: 25px;
}

Answer 5

If you want to use material icons instead of a graphic you can do this with the following css:

span.field-validation-error:after {
    font-family: "Material Icons"; 
    font-size: 20px;
    padding-left: 5px;
    content: "highlight_off";
}