The standard ASP.NET MVC unobtrusive validation styles are pretty crap. Which is fine, as they are just there as a starting point.

If you are using Bootstrap 3 in your project, you can make use of their built in validation styling including the glyphicons. All you need to do, is update your forms to include the glyphicon and add a snippet of JavaScript (As long as you have already set up Unobtrusive Validation in your MVC project that is.).

You need to add the glyphicon under your .form-control like shown below with the classes "glyphicon form-control-feedback"

<div class="form-group">
    @Html.LabelFor(model => model.Name, new { @class = "control-label" })
    @Html.TextBoxFor(model => model.Name, new { @class = "form-control input-lg" })
    <span class="glyphicon form-control-feedback"></span>
    @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })

Then just pop the following JavaScript on the page. I have this code in a file called bootstrap-validation.js and just include it in my Master view.

(function ($) {
    var defaultOptions = {
        validClass: 'has-success has-feedback',
        errorClass: 'has-error has-feedback',
        highlight: function (element, errorClass, validClass) {
            $(element).closest(".form-group").removeClass(validClass).addClass('has-error has-feedback');
            var glyph = $(element).next();
            if (glyph.length > 0) {
        unhighlight: function (element, errorClass, validClass) {
            $(element).closest(".form-group").removeClass('has-error has-feedback').addClass(validClass);
            var glyph = $(element).next();
            if (glyph.length > 0) {


    $.validator.unobtrusive.options = {
        errorClass: defaultOptions.errorClass,
        validClass: defaultOptions.validClass

And that's it. After you have done this, you end up with really nice looking validation on your forms.

Example of validation

A lot of credit for this goes to Mitchel Sellers as I took his code and just added to it.