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

what MVC are you talking about, ASP.net MVC framework or any other framework. it helps to know the backgroundstory... otherwise i would simply say use jquery.validation but thats validation on it's own. not related in any way to your MVC framework. — Sander
– Sander, Commented Sep 19, 2011 at 12:32
Sorry totally over looked that. I'm talking about ASP.net MVC using Razor views. e.g. @Html.ValidationMessageFor(model => model.StationID) next to each field. — Jammy
– Jammy, Commented Sep 22, 2011 at 12:33

archil · Accepted Answer · 2011-09-22 13:32:11Z

15

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.

enter image description here

edited Sep 22, 2011 at 13:32

answered Sep 22, 2011 at 13:26

archil

39.6k7 gold badges69 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

philreed Over a year ago

Is there a way to do this and keep the error message. So have an icon, and a tool tip containing the error text for example?

Johncl · Accepted Answer · 2011-10-06 13:09:04Z

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.

mantipula · Accepted Answer · 2014-05-16 15:42:11Z

0

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

answered May 16, 2014 at 15:42

mantipula

1

Comments

Liam · Accepted Answer · 2016-10-10 15:16:05Z

0

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

answered Oct 10, 2016 at 15:16

Liam

5,5463 gold badges33 silver badges42 bronze badges

Comments

NMeneses · Accepted Answer · 2020-10-09 20:10:35Z

0

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:

edited Oct 9, 2020 at 20:10

answered Oct 9, 2020 at 18:38

NMeneses

1727 silver badges23 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related