How to add “input-validation-error” to nested controls in mvc3

Question

I have a object like this:

public class Test
{
    public String TestValue { get; set; }
}

For this object there is a custom editor for template:

@inherits System.Web.Mvc.WebViewPage<MvcApplication12.Models.TestModel>
@Html.EditorFor(m => m.TestValue)

and a Model-Binder:

public class TestBinder : IModelBinder
{
    public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        ValueProviderResult providerValue =
            bindingContext.ValueProvider.GetValue(bindingContext.ModelName + ".TestValue");
        bindingContext.ModelState.SetModelValue(bindingContext.ModelName + ".TestValue", providerValue);            

        if (null != providerValue && !String.IsNullOrWhiteSpace(providerValue.AttemptedValue))
        {
            Test test = new Test();
            test.TestValue = providerValue.AttemptedValue;
            return test;
        }

        return null;
    }
}

The Model for the Controller is like this:

public class LogOnModel
{
    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [Required]
    [Display(Name = "Value")]
    public Test Value { get; set; }
}

You can see, I use the Test object, that will be rendered by the custom editor for template shown above.

the razor syntax is like that:

            <div class="editor-label">
            @Html.LabelFor(m => m.Password)
        </div>
        <div class="editor-field">
            @Html.PasswordFor(m => m.Password)
            @Html.ValidationMessageFor(m => m.Password)
        </div>

        <div class="editor-label">
            @Html.LabelFor(m => m.Value)
        </div>
        <div class="editor-field">
            @Html.EditorFor(m => m.Value)
            @Html.ValidationMessageFor(m => m.Value)
        </div>

The data anotiation in the model says, that the input for the test object (m.Value) is required. When there is no input for this field, the ModelBinder (TestBinder) will return null.

Then the validation message is displayed like this:

But the css class called "input-validation-error" is not added to the input field.

How can I achieve, that on an Model-Error mvc3 adds the css class "input-validation-error" to all nested input fields of an custom editor template?

Answer 1

finally I solved it. There are two ways to do it.

1. If there is only one Field in your custom editor for, you can use a textbox where you do not set the name

@inherits System.Web.Mvc.WebViewPage<MvcApplication12.Models.TestModel> @Html.TextBox("", Model.TestValue)

1. But maybe you have more than one fields in your custom editor for.

First you have to change your css file and add one line like this

.inner-input-validation-error input[type=text]

here you can now say how your error fields will look like. Maybe like this

.inner-input-validation-error input[type=text],
input.input-validation-error,
textarea.input-validation-error,
select.input-validation-error
{
    border: 1px solid black;
    background-color: red;
    font-size:100%;
}

Now change your custom editor for template, so that you add the class .inner-input-validation-error on error in a span, containing your edit fields

    @inherits System.Web.Mvc.WebViewPage<MvcApplication12.Models.TestModel>
    <span
        @if (!ViewData.ModelState.IsValid)
        {
            <text>
                class="inner-input-validation-error"
            </text>
        }
    >
    @Html.EditorFor(model => model.TestValue1)
    @Html.EditorFor(model => model.TestValue2)

</span>

Thats it.