MVC Validation on Subviews - asp.net-mvc-5

Question

I am working on a Sitecore/MVC application, my first MVC application so I am learning as I go. No doubt I am going wrong somewhere along the line.
I have a Basket that has 2 address views on it, one for billing and another for delivery. There is also a checkbox for "Delivery the same as billing" allowing the user to complete just one address. When you user checks this checkbox the delivery address div collapses.
Main view:
<div class="pure-control-group">
<h2>Billing Address</h2>
#Html.Action("Init", "Address", new {AddressType = "Billing", #Address = Model.Billing})
</div>
<!-- Delivery Address-->
<div class="pure-control-group">
<h2>Delivery Address</h2>
<label for="UseBillingForShipping" class="pure-checkbox">
#Html.CheckBoxFor(x => x.UseBillingForShipping)
Same as Billing Address above
</label>
</div>
<div class="manual-address-entry focus-pane">
#Html.Action("Init", "Address", new {AddressType = "Delivery", #Address = Model.Delivery})
</div>
An example of the Address view:
<div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-2-5">
<label for="#(Model.AddressType).FirstName">First Name<span class="required">*</span></label>
<input type="text" id="#(Model.AddressType).FirstName" name="#(Model.AddressType).FirstName">
#Html.ValidationMessageFor(x=>x.FirstName) //<= How to handle this?
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-2-5">
<label for="#(Model.AddressType).LastName">Last Name<span class="required">*</span></label>
<input type="text" id="#(Model.AddressType).LastName" name="#(Model.AddressType).LastName">
#Html.ValidationMessageFor(x=>x.LastName) //<= How to handle this?
</div>
My problem occurs when I am trying to validate. The id of the controls on the address view are named id="#(Model.AddressType).LastName" so in the case of the Billing address they render like id="Billing.LastName"
On the Address model the fields are annotated, e.g:
[Required(ErrorMessage = "First Name is required")]
public string FirstName { get; set; }
[Required(ErrorMessage = "Last Name is required")]
public string LastName { get; set; }
So I have 2 problems:
How do I create the #Html.ValidationMessageFor markup. I have tried #Html.ValidationMessageFor(x=>x.FirstName) and something similar to the labelfor (<label for="#(Model.AddressType).LastName">), #Html.ValidationMessageFor(#(Model.AddressType).LastName) and neither work. I am starting to think I have approached this totally the wrong way.
The second is if the user selects the checkbox for same address how would I go about switching off validation for the second address only.

Answer 1

The easiest way to handle this is to use a custom EditorTemplate for your address model. Assuming its public class Address, then create a view in /Views/Shared/EditorTemplates named Address.cshtml (i.e. named to match the name of your type)
#model yourAssembly.Address
#Html.LabelFor(m => m.FirstName)
#Html.TextBoxFor(m => m.FirstName)
#Html.ValidationMessageFor(m => m.FirstName)
... // ditto for other properties of Address
Then in the main view
#Html.EditorFor(m => m.Billing)
#Html.CheckBoxFor(x => x.UseBillingForShipping)
#Html.EditorFor(m => m.Delivery)
The EditorFor() method will use your template and correctly name all elements for binding (including the validation message)
Note that because you have a [Required] attribute, the script that hides the 'Delivery' address, should also ensure that it copies the contents of the 'Billing' to the 'Delivery' address controls otherwise validation will fail (alternatively you could use a [RequiredIf] validation attribute)