Client side validation in MVC3 partial view half working

Question

I'm having problems with client side validation on our account creation form in MVC3. I am using data annotations on the model and the view is a partial view. Only two of the fields are being validated when I run it in a partial view. When I put the code in a regular view all of the fields are being validated.

After searching this seems to be a common problem but this case seems different because it is "half working", meaning that I am sure the .js libs are loaded and at least sort of working. I am not loading anything with Ajax which seems to cause problems. I'm using jquery 1.5.1 and jquery.validate 1.8.0 which are IIRC what came with the install of MVC3.

Has anyone seen/solved this sort of problem?

Here is my view:

<%: Html.Hidden("Bounce", Model.Bounce)%>

<div class="editor-label"><label for="FirstName">First Name</label></div>
<div class="editor-field">
    <%: Html.TextBox("FirstName", Model.FirstName)%><br />
    <%=Html.ValidationMessage("FirstName")%>
</div>

<div class="editor-label"><label for="MiddleName">Middle Name</label></div>
<div class="editor-field">
    <%: Html.TextBox("MiddleName", Model.MiddleName)%><br />
    <%=Html.ValidationMessage("MiddleName")%>
</div>

<div class="editor-label"><label for="LastName">Last Name</label></div>
<div class="editor-field">
    <%: Html.TextBox("LastName", Model.LastName)%><br />
    <%=Html.ValidationMessage("LastName")%>
</div>

<div class="editor-label"><label for="Email">Email</label></div>
<div class="editor-field">
    <%: Html.TextBox("Email", Model.Email)%><br />
    <%=Html.ValidationMessage("Email")%>
</div>

<div class="editor-label"><label for="Password1">Password</label></div>
<div class="editor-field">
    <%: Html.Password("Password1",Model.Password1)%><br />
    <%=Html.ValidationMessage("Password1")%>
</div>

<div class="editor-label"><label for="Password2">Confirm Password</label></div>
<div class="editor-field">
    <%: Html.Password("Password2",Model.Password2)%><br />
    <%=Html.ValidationMessage("Password2")%>
</div>

<div class="form-controls"><input type="submit" value="Create Account" /></div>

The view is being rendered with

<% Html.RenderPartial("create", new CustomerCreationRequest()); %>

This is the Model

public class CustomerCreationRequest
{


    [Required(ErrorMessage = "First Name is required")]
    public string FirstName { get; set; }

    public string MiddleName { get; set; }

    [Required(ErrorMessage = "Last Name is required")]
    public string LastName { get; set; }

    [Required(ErrorMessage = "Email Address is required")]
    public string Email { get; set; }

    [Required(ErrorMessage = "Password is required")]
    public string Password1 { get; set; }

    [Compare("Password1", ErrorMessage = "The password and confirmation do not match.")]
    [Required(ErrorMessage = "Password confirmation is required")]
    public string Password2 { get; set; }

    public string Bounce { get; set; } //bounce
}

The two fields that work correctly are the Password1 and Password2 fields. Both validation rules work aswell (ie the Require and Compare). All other fields are not being validated and will allow the form to be submitted when blank.

Update

When looking at the generated markup it appears the data-val-required field is not present on the first 4 normal input fields but does appear on the last 2 password fields (the ones that work).

Update 2

After the form is submitted and rejected by the server the data-val-required field does appear and all of the inputs work correctly and are validating. It is only on the initial load that they are only appearing on the password fields.

Answer 1

I hope this is mainly due to the library mismatch(possibly the jquery validation library). When I created a fresh MVC 3 project I don't see a version no. in the jquery validation library.

Please update the libraries to latest using nuget.

PM> Install-Package jQuery

PM> Install-Package jQuery.Validation

PM> Install-Package jQuery.Validation.Unobtrusive

Answer 2

I was in the processof updating the code to MVC and using strongly typed views and from previous versions there was a block of code in the controller that was writing out these named fields to ViewData. eg

        ViewData["loginError"] = "";
        ViewData["createError"] = "";
        ViewData["firstName"] = "";
        ViewData["middleName"] = "";
        ViewData["lastName"] = "";
        ViewData["email"] = ""; 

When I removed these everything worked.