Support two different validation messages per field/rule with unobtrusive validation

问题

We are building an ASP.NET MVC3 web site using Fluent Validation with support for unobtrusive validation. Our UX team has asked if we can support two separate messages for validation, per field and per rule: one that would show next to the field, and a different one that would show in the summary.

For example:

Please address the following issues:
- Please provide a First name
- Please provide a Birth date

First name: __________________ < First name is required >
Birth date: __________________ < Birth date is required >

Notice the field-level and summary-level validation messages are different.

My first option was to extend the built-in validation to allow a second message, but I don't think this is easily accomplished because everything is hard-wired into ModelError which only supports one ErrorMessage.

So the only other thing I could think of was to hack it (yes, this solution smells) by combining the two messages into one string, and modifying the helpers/jquery to parse the two messages out of these (but I'm having problems doing that too).

This solution needs to work with client-side unobtrusive validation (using data- attributes), as well as server-side of course.

I would love to hear of another way to do this.

Update

Here is my view

@using (Html.BeginForm())
{
    @Html.ValidationSummary()
    <p>
        @Html.EditorFor(m => m.UserName)
        @Html.ValidationMessageFor(m => m.UserName)
    </p>
    <p>
        @Html.EditorFor(m => m.BirthDate)
        @Html.ValidationMessageFor(m => m.BirthDate)
    </p>    
    <input type="submit" />
}

And here's what it renders:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
</head>
<body>
    <form action="/" method="post">
    <div class="validation-summary-valid" data-valmsg-summary="true">
        <ul>
            <li style="display: none"></li>
        </ul>
    </div>
    <p>
        <input class="text-box single-line" data-val="true" id="UserName" 
               name="UserName" type="text" value="" 
               data-val-required="The User name field is required." />
        <span class="field-validation-valid" 
              data-valmsg-for="UserName" data-valmsg-replace="true">
        </span>
    </p>
    <p>
        <input class="text-box single-line" data-val="true" id="BirthDate" 
               name="BirthDate" type="text" value="" 
               data-val-required="The Date of birth field is required." />
        <span class="field-validation-valid" data-valmsg-for="BirthDate" 
              data-valmsg-replace="true">
        </span>
    </p>
    <input type="submit" />
    </form>
</body>
</html>

来源：https://stackoverflow.com/questions/11478505/support-two-different-validation-messages-per-field-rule-with-unobtrusive-valida

标签

asp.net-mvc-3

validation

unobtrusive-validation