Changing Name attribute in MVC razor, breaks Model

Question

I have the following model:

public class Patient
{
    public DateTime DOB { get; set; }
    public DateTime DateCreated { get; set; }
    [Required] // FullName is required
    public string FullName{ get; set; }
    public virtual Address Address { get; set; }
}

The address is a related entity.

public class Address
{
    public string Street { get; set; }
    ...
}

I'm using formvalidation.io (formvalidation.io) to ensure fields are required.

A snippet here from formvalidation.io shows how the json is structured

fields: {
            FullName: {
                validators: {
                    notEmpty: {
                        message: 'The full name is required'
                    }
                }
            }...

Which is working as expected.

When it comes to my related Address entity, my auto razor view is:

@Html.TextBoxFor(x => x.Address.Street, new { @class = "form-control" })

Which creates the following HTML

<input class="form-control" data-val="true" data-val-required="The Street field is required." id="Address_Street" name="Address.Street" type="text" value="">

So, I posted my form, and all the information is present, including the related 'Address' information, apart from the validation doesn't work.

If I go back to the formvalidation.io, I cannot rename my field to the following, as it's not correct JSON:

fields: {
        **Address.Street**: {
            validators: {
                notEmpty: {
                    message: 'The street is required'
                }
            }
        }

So I changed the "Name" attribute on my Razor view so it looks like this:

@Html.TextBoxFor(x => x.Address.Street, new { @class = "form-control", Name = "Street" })

I've removed the 'Address.' from my formvalidation.io JSON, so I just have 'Street' which matches the 'Name' attribute in the outputted HTML. All works fine with the validation. The problem is when I actually post the information using, the 'Address' element is null. None of information relating to the address gets posted, it feels like I'm able to use validation by changing the 'Name' attribute on the elements but don't receive the data, or I lose the validation by gaining data.

Can I have both the data and the validation?

Kind regards

EDIT

My form is submitted via ajax. When the validation is successful, The following JavaScript runs:

           $.ajax({
                    type: 'POST',
                    url: "add",
                    data: $('#form-validation').serialize(),
                    dataType: "json",
                    success: function (resultData) { alert("Save Complete") }
                });

Answer 1

While Address.Street is not valid JSON markup, 'Address.Street' is. That should allow for the JSON to validate properly.

Your JSON should look like.

fields: {
    'Address.Street': {
        validators: {
            notEmpty: {
                message: 'The street is required'
            }
        }
    }