Question

Interesting situation. I have a Html.Textbox() that I render from a view as follows:

<%= Html.TextBox("title", Model.Title, new { @class = "txt" }) %>

In my controller, I have the following, somewhat simplified, validation on the title. For arguments sake, assume it finds the error, and re-renders the view with the modelstate error information.

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditBook(string title) {
    Model = new Book(ControllerContext.RequestContext);
    if (String.IsNullOrEmpty(title))
    {
        title = String.Empty;
        ModelState.AddModelError("title", "* Title is a required");
        modelState.SetModelValue("title", ValueProvider["title"]);
    }
    else { // show confirmation }

    if (!ModelState.IsValid)
    {
        return View("EditBook", Model);
    }
}

When the page is re-rendered, my html text box correctly has the input-validation-error class attached to it… But it’s useless as it’s the first class attached! I need it to override all existing styles on my text box. The html output is as follows:

<input type="text" name="title" id="title" class="input-validation-error txt"/>

Assume the following css styles have been defined:

input.txt { border: 1px; color: #000 }
.input-validation-error { border: 2px solid #fff }

The problem is, my original css class “txt” takes precedence, and prevents me from being able to style the error text box correctly.

Any thoughts?

Answer 1

Instead of relying on the framework to render styles at all, I went with an approach where I could apply my own css classes, while still using much of the Html.ValidationMessage() infrastructure.

Looks something like this:

<% bool emailError = !String.IsNullOrEmpty(Html.ValidationMessage("email"));  %>
<div id="EmailMod" class="module <%= emailError ? "error" : String.Empty %>">
    <label class="text_right">Email address</label>
    <div class="input">
        <input type="text" id="Email" name="Email" class="input" tabindex="1" />
        <p id="EmailRequired" class="required <%= emailError ? "" : "hide" %>">* Please enter a valid email address.</p>
    </div>
</div>