Question

When we use mvc model validation engine, it automatically adds certain css classes from Site.css to editors, generated by HTML helper methods; i.e.one of these for certain object:

.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

We can surely edit these styles to apply the required styling.

But is there an opportunity to tell the model validation engine, what exact style to use, depending on any user requirements, so that we could have one page with different fields, styled differently?

EDIT

Say we have the following view:

@model ModelValidation.Models.Appointment
@{
    ViewBag.Title = "Make a Booking";
}
<h2>
    Book an Appointment</h2>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <p>
        @Html.LabelFor(m => m.ClientName, "Your name: ") @Html.EditorFor(m => m.ClientName)
        @Html.ValidationMessageFor(m => m.ClientName)
    </p>        
    <p>
        @Html.LabelFor(m => m.Date, "Appointment Date: ") @Html.EditorFor(m => m.Date)
        @Html.ValidationMessageFor(m => m.Date)
    </p>
    <p>
        @Html.EditorFor(m => m.TermsAccepted) @Html.LabelFor(m => m.TermsAccepted, "I accept the terms & conditions")
        @Html.ValidationMessageFor(m => m.TermsAccepted, null, new { @class = "other-input-validation-error" })
    </p>
    <input type="submit" value="Make Booking" />
}

With @Html.ValidationMessageFor overload we can specify the css class to style error message. But how can we specify css class for the editor?

Answer 1

I’m indeed waiting for other answers in impatience, but until that this is what I came up with.

There is a necessary overload for concrete helper methods like Html.TextBoxFor or Html.PasswordFor, etc. So the following example shows what I wanted:

@using (Html.BeginForm())
{
    <p>
        @{ModelState state = ViewData.ModelState["ClientName"];            
        }
        @Html.LabelFor(m => m.ClientName, "Your name: ")
        @if (state != null && state.Errors.Count > 0)
        {
            @Html.TextBoxFor(m => m.ClientName, new { @class = "other-input-validation-error" })
        }
        else
        {
            @Html.EditorFor(m => m.ClientName)
        }
        @Html.ValidationMessageFor(m => m.ClientName)
    </p>        
}

But I am still open to any other ideas how to do this. I’m very new to asp in general and may be easily missing (simply don’t know) some nice feature of the technology.

EDIT

As it is said in Sanderson S. Freeman A. – Pro ASP.NET MVC 3 Framework Third Edition

We can’t use the templated helpers to generate an editor for a
property if we also want to provide additional attributes, so we have
used the Html.TextBoxFor helper instead and used the version that
accepts an anonymous type to use for HTML attributes.