2

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>
Community
  • 1
  • 1
Jerad Rose
  • 15,235
  • 18
  • 82
  • 153
  • Unobtrusive client side validation doesn't work with ValidationSummary. So when you are saying that the solution needs to work with client side validation do you mean for the per-field basis only (ValidationMessageFor)? Or do you also need to implement client side validation for the ValidationSummary? – Darin Dimitrov Jul 13 '12 at 21:25
  • Hmm. The PoC I'm working on has both ValidationMessageFor and ValidationSummary working unobtrusively. That is, when I click submit, both summary and field messages show up without hitting the server. And they're both using the messages from the unobtrusive tags (`data-val-required`). Am I misunderstanding what you're saying? – Jerad Rose Jul 13 '12 at 21:29
  • I was talking complete nonsense. Please ignore my previous comment. – Darin Dimitrov Jul 13 '12 at 21:42
  • Haha, ok, I'm glad because I was confused. :) But I went ahead and posted the sample view/output. – Jerad Rose Jul 13 '12 at 21:45

0 Answers0