MVC 3 - Client Side Validation on a child object of a view model

Question

I have a view model that looks like this -

public class upgradeViewModel
{
    public Cart Cart { get; set; }
    public RegisterModel RegisterModel { get; set; }
} 

The view model contains a property called RegisterModel the RegisterModel model object looks similar to this -

public class RegisterModel
{
    [Required]
    [Display(Name = "Your name")]
    public string UserName { get; set; }

    [Required]
    [DataType(DataType.EmailAddress)]
    [Display(Name = "Your email address")]
    public string Email { get; set; }

    ...
}

I use the RegisterModel property on the view model to set up a form in a view that uses upgradeViewModel object as it's model. On submitting the form I don't get any client side validation, although I do get server side validation for the RegisterModel object.

I believe I have everything configured correctly for unobtrusive client side validation to work, and it works in other areas of the web site. Do I need to do something extra to get client side validation to work for a child object of the view model?

Here's my view code -

@model upgradeViewModel

@{
    ViewBag.Title = "Title";
    Layout = "~/Views/Shared/_LayoutNormal.cshtml";
}

<h2>Title</h2>

Some text ....

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true, "Account creation was unsuccessful. Please correct the errors and try again.")
    <div>
        <fieldset>
            <legend>Your Information</legend>

            <div class="editor-label">
                @Html.LabelFor(m => m.RegisterModel.UserName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.RegisterModel.UserName)
                @Html.ValidationMessageFor(m => m.RegisterModel.UserName)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.RegisterModel.Email)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.RegisterModel.Email)
                @Html.ValidationMessageFor(m => m.RegisterModel.Email)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.RegisterModel.Password)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(m => m.RegisterModel.Password)
                @Html.ValidationMessageFor(m => m.RegisterModel.Password)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.RegisterModel.ConfirmPassword)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(m => m.RegisterModel.ConfirmPassword)
                @Html.ValidationMessageFor(m => m.RegisterModel.ConfirmPassword)
            </div>

            <p>
                <input type="submit" value="Save Details" class="inputbutton" />
            </p>
        </fieldset>
    </div>
}

Answer 1

You should make sure that the following appsettings are in your web.config file. And you have referenced jquery.validate.unobtrusive.min.js on your page. (Which should be in the Scripts folder of your MVC project when you create it)

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />