0

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>
D Stanley
  • 149,601
  • 11
  • 178
  • 240
Slinky
  • 5,662
  • 14
  • 76
  • 130

1 Answers1

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

Romias
  • 13,783
  • 7
  • 56
  • 85
  • Would you provide an example? Not quite sure what you mean. The data annotation for the class objects would need to go in the view model, not on the actual model itself, because not all objects of that class will need to be required. – Slinky Feb 06 '14 at 14:15
  • In your NewClubSponsor class is where you should place the Data Annotations. Then, with what you have and given that you already have included the jquery.validate.unobtrusive.js, it should work client side. – Romias Feb 06 '14 at 15:35
  • i was trying to keep the annotations in the view model but it seems as though for a list of objects, they need to go into the domain model instead. – Slinky Feb 07 '14 at 14:51