MVC4 graphical validation for text box

问题

I got a problem in MVC4 validation.Currently, i use validationMessageFor for error message. It is not so beautiful so i want to change my validation. i want to do graphical validation. for example, i want to validate Email in Entry form. if the email is valid, my text box will look like the following.

if email is wrong, i want to show the user to following.

in MVC4, is it possible to do it? how should i design my text box to get according to the picture? how to add tick icon and cross icon in text box as well as envelope icon? how to fill red color if email is wrong format?

appreciate for any help, thanks

回答1:

That's possible, though it has little to do with ASP.NET MVC. Making your webpages look pretty is a job for CSS (which lives on the client), not for MVC (which lives on the server).

Your CSS would look something like this:

input[type="email"] {
    background: url('images/envelope.png') no-repeat center left 5px;
    padding-left: 50px; /* depends on width of envelope image */
}
input[type="email"].input-validation-error {
    background: url('images/envelope.png') no-repeat center left 5px, url('images/cross.png') no-repeat center right 5px;
}

And your HTML:

<input type="email" />

You yourself will have to mark the element as invalid. From the top of my head, I believe the jQuery Validation plugin shipped with MVC4 uses the .input-validation-error class out-of-the-box. If you've got this working, then applying it again for a valid state shouldn't be much more effort.

One more thing. Note that this example uses multiple backgrounds on an element. This is a CSS3 feature and older browsers don't support this.

*Update

Specific to ASP.NET MVC, here's how to generate the field:

@Html.TextBoxFor(model => model.Email, new { @class = "email" })

And here's the CSS to make it look pretty:

input.email {
    background: url('images/envelope.png') no-repeat center left 5px;
    padding-left: 50px; /* depends on width of envelope image */
}
input.email.input-validation-error {
    background: url('images/envelope.png') no-repeat center left 5px, url('images/cross.png') no-repeat center right 5px;
}

来源：https://stackoverflow.com/questions/14998057/mvc4-graphical-validation-for-text-box