Geek Answers Handbook

ASP.NET MVC validation pattern and icon in invalid jQuery fields

I am looking for a way to change the standard ASP.NET MVC check so that instead of putting a message next to each invalid form field, it places an icon instead. Then I listed the errors somewhere else on the page. The icon will be an image, so I will need to display the image tag next to the wrong fields. Besides placing the icon, I would like to put a red frame around the irregular margins.

To summarize, when validation is a trigger for a specific field, I would like the image to be placed next to the field instead of a text message, and I would like the field to change the css style to one with a red border, Does anyone know how to do this? Thanks.

I am using ASP.net MVC with kinds of razors. I have

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

Actually, redefinition of all client verification material would not be a good idea. So, I will show you a simple hack approach. This can help you.

Checks by default place the .field-validation-error class in the generated spaces in the text container. So let a style that suits 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 causes the contents of the range text to disappear and instead places the background image. This gives pretty close visual behavior to the one you need.

This is the exact result indicated above css.

enter image description here

+15
source

I think that both color: transparent and background size require CSS3. I could not hide the text without using jQuery to "disable it". Although I read that "line-height: 0" can also work. In any case, using jQuery you can also move the text to a tooltip. 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 things than a tooltip, though the first time you use jQuery.

+4
source

Given the accepted answer, if you want to keep the original error message, just remove the transparent line and add the add-on:

 .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; }
0
source

If you want to use material icons instead of graphics, 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"; }
0
source

More articles:


All Articles