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 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 validation 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

Answer 1

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.