Question

Something strange is happening here.

I have a basic form:

    <% using (Html.BeginForm())
       { %>
       <%: Html.LabelFor(model => model.user.email) %>
       <%: Html.TextBoxFor(model => model.user.email) %>
       <%: Html.ValidationMessageFor(model => model.user.email) %>
       <br />
       <%: Html.LabelFor(model => model.user.password) %>
       <%: Html.PasswordFor(model => model.user.password) %>
       <%: Html.ValidationMessageFor(model => model.user.password) %>
       <br />
       <%: Html.LabelFor(model => model.user.confirmPassword) %>
       <%: Html.PasswordFor(model => model.user.confirmPassword) %>
       <%: Html.ValidationMessageFor(model => model.user.confirmPassword) %>
       <br />
       <input type="submit" value="Submit" />
    <% } %>

The head has the following:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<link rel="Stylesheet" type="text/css" href="/Content/Site.css" />
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

The ViewModel is this:

public class RegisterViewModel
{
    public RegisterUser user { get; set; }
}

public class RegisterUser
{
    [Required]
    [Display(Name = "Email Address")]
    public string email { get; set; }

    [Required]
    [Display(Name = "Password")]
    public string password { get; set; }

    [Required]
    [Display(Name = "Confirm Password")]
    [Compare("password")]
    public string confirmPassword { get; set; }
}

The compare validation between password and confirmPassword always says:
‘Confirm Password’ and ‘password’ do not match.
even when I know that they do match

Here’s the strange part: when I remove the first field from the view page, everything works.

So when it’s just

<% using (Html.BeginForm())
   { %>
   <%: Html.LabelFor(model => model.user.password) %>
   <%: Html.PasswordFor(model => model.user.password) %>
   <%: Html.ValidationMessageFor(model => model.user.password) %>
   <br />
   <%: Html.LabelFor(model => model.user.confirmPassword) %>
   <%: Html.PasswordFor(model => model.user.confirmPassword) %>
   <%: Html.ValidationMessageFor(model => model.user.confirmPassword) %>
   <br />
   <input type="submit" value="Submit" />
<% } %>

it all works perfectly.

Any ideas?

Thanks.

Answer 1

This is a bug in the client side validation script: jquery.validate.unobtrusive.js

At Line ~284 you’ll find this:

element = $(options.form).find(":input[name=" + fullOtherName + "]")[0];

Change it to this:

element = $(options.form).find(":input[name='" + fullOtherName + "']")[0];

The name attribute needs single quotes.