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

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 would then list the errors somewhere else on the page. The icon will be an image so i'd need to render the image tag next to incorrect fields. As well as putting an icon i'd like to put a red border around the incorrect fields.

To summarise when the valid开发者_如何学编程ation is triggerd against a particular field i'd like an image placed next to the field instead of the text message and i'd like the field to have a change of css style to one with a red border. Does anyone know how to do this? Thanks.

I'm using ASP.net MVC with razor views. I have

@Html.ValidationSummary(true) <-- At the top of the form 
@Html.ValidationMessageFor(model => model.fieldname) <-- next to each field

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.

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.

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;
}

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";
}

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: