ASP.NET MVC验证-如何更改MVC验证引擎输出的html？

Question

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 message, 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.

Answer 1

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(...))
    }
}

Answer 2

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).