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>