@Html.ValidationSummary() - how to set order of error messages

Question

I have three form elements. We'll call them RadioA, RadioB, and Dropdown. In the Model they are created in that order, and presented in the View in that order, and specified as required with a unique error message for each. Then in the view, I use:

@Html.ValidationSummary()

But the error messages come back:

• Dropdown is required
• RadioA is required
• RadioB is required

On this thread, I am learning that we really don't have much control over the order in which these error messages come back. A few people gave suggestions on how to hack this, but I can't get any of them to work.

Any ideas? Should I just use jQuery and validate each form item the old-fashioned way?

Answer 1

I stand corrected. The answer provided by mhapps worked like a charm. It's the last answer. I quote him:

I had this problem, and to solve it quickly I recreated the validation summary like above and used ViewBag to store the errors in the correct order by referencing an array of ordered field names. Not particularly nice but the fastest thing I could think of at the time. Razor/MVC3.

Controller code:

List<string> fieldOrder = new List<string>(new string[] { 
"Firstname", "Surname", "Telephone", "Mobile", "EmailAddress" })
.Select(f => f.ToLower()).ToList();

ViewBag.SortedErrors = ModelState
   .Select(m => new { Order = fieldOrder.IndexOf(m.Key.ToLower()), Error = m.Value})
   .OrderBy(m => m.Order)
   .SelectMany(m => m.Error.Errors.Select(e => e.ErrorMessage))
   .ToArray();

Then in the view:

@if (!ViewData.ModelState.IsValid)
{
    <div class="validation-summary-errors">  
    <ul>
        @foreach (string sortedError in ViewBag.SortedErrors)
        {
            <li>@sortedError</li> 
        }
    </ul>
    </div>
}

Answer 2

I think a better way of doing this is to order the properties in your model in the same order you that you would like to display your validation messages:

public class Ingredients
{
    [Required]
    public string Vegetable { get; set; }
    [Required]
    public string Starch { get; set; }
    [Required]
    public string Meat { get; set; }
    [Required]
    public string Fruit { get; set; }
  }

This will display a message in the following order:

• The Vegetable field is required.
• The Starch field is required.
• The Meat field is required.
• The Fruit field is required.

---