jquery.validate does not seem to work with certain inputs where name value includes a dot i.e RegisterModel.Pssword

问题

In my views if I use a model that just has scalar, basic properties i.e [RegisterModel] everything works fine. But if I use a view model type where one or more properties is set to another .net complex type, say [RegisterModelAndLogOnModel] then the generated HTML does not work properly with the jQuery validate plug-in. With jQuery 1.7.2 it always tells me the confirmation password does not match the password, in jQuery 1.8.2 it just plain refuses to work and errors. I have now pin pointed the problem to the RegisterModel.ConfirmPassword input.

 <input name="RegisterModel.Password" id="RegisterModel_Password" type="password" data-val="true" data-val-required="The Password field is required." data-val-length-min="6" data-val-length-max="100" data-val-length="The Password must be at least 6 characters long.">

<input name="RegisterModel.ConfirmPassword" id="RegisterModel_ConfirmPassword" type="password" data-val="true" data-val-equalto-other="*.Password" data-val-equalto="The password and confirmation password do not match."/>

works:

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

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

Does not work:

<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>

回答1:

One of the HTML attributes generated, namely the data-val-equalto-other="*.Password" for use with jQuery validate plugin with @Html.PasswordFor(m => m.RegisterModel.ConfirmPassword) is no good. I used the helper method to generate the HTML once, copied the whole thing and replaced the helper method code with the static html, changing data-val-equalto-other="*.Password" to data-val-equalto-other="RegisterModel\.ConfirmPassword"

回答2:

As @Ryan Amies pointed out, jQuery cannot find a property like this

$(form).find(":input[name='RegisterModel.Password']")

it needs the dot (and a bunch of other characters) escaped, ie

$(form).find(":input[name='RegisterModel\.Password']")

The version of jquery.validate.unobtrusive.js that comes as part of an MVC3 template project has a bug whereby nested properties are not found because they are not escaped. This bug is fixed in the latest version of Microsoft.jQuery.Unobtrusive.Validation package available using NuGet.

This function has been added to jquery.validate.unobtrusive.js

function escapeAttributeValue(value) {
 // As mentioned on http://api.jquery.com/category/selectors/
 return value.replace(/([!"#$%&'()*+,./:;<=>?@\[\\\]^`{|}~])/g, "\\$1");
}

this results in

escapeAttributeValue('this!thing') // this\!thing

this means that the unobtrusive plugin can now handle forms with nested properties correctly

来源：https://stackoverflow.com/questions/13048424/jquery-validate-does-not-seem-to-work-with-certain-inputs-where-name-value-inclu