Validating a list of objects - unobtrusively ASP.NET MVC 3 C#

Question

This seem like it should be easy to implement but I am finding it challenging. I have a list of objects in my view model that need to be validated, unobtrusively.

I have looked at FluentValidation for this yet there seems to be a bug in the collections validation implementation that does not fire the unobtrusive validator. Not sure if there is a way to use Data Annotations for a list of objects where the validation will happen unobtrusively (and server-side)

I am looking for suggestions on how to do this. Thanks

The object

public class NewClubSponsor
{
    public string SponsorContactName { get; set; }
    public string SponsorContactEmail { get; set; }
    public string SponsorContactPhone { get; set; }
 }

I declare the list of NewClubSponsor objects in my View Model

 public List<NewClubSponsor> Sponsors { get; set; }

The View

<div id="addCosponsorSection">
    <!-- We have at least 1 existing sponsor -->
     @if (Model.Sponsors != null)
     {
         for (var i = 0; i < Model.Sponsors.Count; i++)
         {
             string sponsorDivId = "sponsorclubname" + i.ToString();
             string deleteLink = "<a class=\"icon delete cosponsor\" data-attr-divid=\""+@sponsorDivId+"\" data-attr-id=" + @Model.Sponsors[i].Id + "></a>";

             <div id="@sponsorDivId">
                 <div class="formColumn1"><label for="sponsorclubname1">Sponsor club name</label></div>
                 <div class="formColumn2">@Html.EditorFor(x => x.Sponsors[i].SponsorContactName)
                     <div class="messageBottom"> 
                         @Html.ValidationMessageFor(model => model.Sponsors[i].SponsorContactName)
                     </div>
                  </div>
                 <div class="formColumn3">@Html.EditorFor(x => x.Sponsors[i].SponsorContactEmail)
                        <div class="messageBottom"> 
                            @Html.ValidationMessageFor(model => model.Sponsors[i].SponsorContactEmail)
                        </div>
                 </div>
                 <div class="formColumn4">@Html.EditorFor(x => x.Sponsors[i].SponsorContactPhone)@(i > 0 ? Html.Raw(deleteLink) : Html.Raw(""))
                  <div class="messageBottom"> 
                            @Html.ValidationMessageFor(model => model.Sponsors[i].SponsorContactPhone)
                   </div>
                 </div>
             </div>
             <div class="clear"></div>

         }

     }
     else
     {
         <!-- No sponsors added yet. We need at least 1 sponsor -->
         <div id="sponsorclubname1">
             <div class="formColumn1"><label for="sponsorclubname1">Sponsor club name</label></div>

             <div class="formColumn2">@Html.EditorFor(model => model.Sponsors[0].SponsorContactName)
                 <div class="messageBottom"> 
                     @Html.ValidationMessageFor(model => model.Sponsors[0].SponsorContactName)
                 </div>
              </div>
             <div class="formColumn3">@Html.EditorFor(model => model.Sponsors[0].SponsorContactEmail)
                <div class="messageBottom"> 
                @Html.ValidationMessageFor(model => model.Sponsors[0].SponsorContactEmail)
              </div>
            </div>
             <div class="formColumn4">@Html.EditorFor(model => model.Sponsors[0].SponsorContactPhone)
                 <div class="messageBottom"> 
                     @Html.ValidationMessageFor(model => model.Sponsors[0].SponsorContactPhone)
                 </div>
              </div>
         </div>
         <div class="clear"></div>
         <!-- END Static HTML -->

     }
 </div>

Answer 1

You can add Data Annotation in the object that the list is composed of. This will add the data-valid and requerire attributes...

But, if the list is created on the fly, you will need to bind the validation logic once you add a new item in the form (if you are adding it via JS).