ASP.NET MVC validation - How can I change the html that is output by the validation engine of MVC?

When using ASP.NET MVC validation on forms, error messages are output in specific html. Like for example if you are validating a textbox that must be filled in, the output after the validation fails would be like so:

<label for="MonkeyName">Name: </label>
<span class="field-validation-error">*</span>
<br />
<input class="input-validation-error" id="MonkeyName" name="MonkeyName" type="text" value="" />

In the above code, the span tag has been automatically generated by the validation framework and a class named input-validation-error was added to the textbox. But what if I want the validator to generate different html?

I would like to use the MVC validation framework however I would like to have total control on the way validation messages are displayed especially since MVC promises control over the UI. The HTML and CSS I have designed (before even deciding the server-side programming language to be used) is different for error messages because I want to set a class with the container of the textbox and not the textbox itself. Take this as an example:

<dl class="error">
  <dt>
    <label for="email">Email</label>
      <span class="required">Required</span> 
  </dt>
  <dd>
    <input class="textinput_med" id="FromEmail" name="FromEmail" type="text" value="" />
    <a href="#"><img src="Content/images/structure/help.png" width="30" height="30" alt="Help" /></a> 
    <span class="errormessage">Some Error</span> 
  </dd>
</dl>

Although I have a span for the error me开发者_运维知识库ssage, I would like to set the container tag (dl) with the css class named error. Is there a way I can determine the way error messages are rendered by the validation framework?

Note: Although I have thought about a solution with jQuery that detects form fields that have a class of 'input-validation-error' and sets their respective containers with my custom css class 'error' I don't think it's a good solution and I think it's a workaround for something that could have been better. I can upgrade from MVC 2 to MVC 3 if this solves the issue.

---

Sounds like you need to write a different extension method that edits the content of theirs

namespace HtmlExtensions
{
    public static HtmlString CustomValidateFor(this HtmlHelper helper, ...)
    {
        return Edit(helper.ValidateFor(...))
    }
}

---

One angle you could pursue would be taking advantage of how the ASP.NET MVC unobtrusive validation script searches for all elements within the form with a data-valmsg-for="inputName" attribute and it tags them with the field-validation-error class. So, you can work with the existing functionality by adding that attribute to your container:

<dl data-valmsg-for="FromEmail" data-valmsg-replace="false">
  <dt>
    <label for="email">Email</label>
    <span class="required">Required</span> 
  </dt>
  <dd>
    <input class="textinput_med" id="FromEmail" name="FromEmail" type="text" value="" />
    <a href="#"><img src="Content/images/structure/help.png" width="30" height="30" alt="Help" /></a> 
  </dd>
</dl>

Then, the <dl> will get the field-validation-error class in addition to the <input>. The drawback here is that you lose the validation error message. If you're using a validation summary, maybe that wouldn't be an issue (and you can control that container by tagging a container with data-valmsg-summary="true" and placing a <ul> in it).

If working within the framework doesn't work for you, you can always tweak the jquery.validate.unobtrusive.js to your liking. The error styling/placement code is pretty simple once you get your head around it (specifically, look at the onError and onErrors functions at line 39 and 55).