MVC3 CompareAttribute, ошибка на стороне клиента

Question

Я использую MVC3 и хочу, чтобы форма входа и регистрации была на одной странице.Чтобы добиться этого, я построил LogInRegisterViewModel следующим образом:

public class LogInRegisterViewModel
{
    public LogInViewModel LogIn { get; set; }
    public RegisterViewModel Register { get; set; }
}

Это дает мне то, что я хочу (две формы на одном экране) и отправляет данные в правильные контроллеры и возвращает и отображает ошибки для форм (если таковые имеются),Единственная проблема, с которой я сталкиваюсь, - это CompareAttribute, который у меня есть выше свойства ConfirmPassword в моем RegisterViewModel:

public class RegisterViewModel
{
    [Required]
    [Display(Name = "Friendly user name")]
    public string UserName { get; set; }

    [Required]
    [Display(Name = "E-mail address")]
    public string Email { get; set; }

    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    [StringLength(16, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
    public string Password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirm password")]
    [Compare("Password", ErrorMessage = "Passwords do not match.")]
    public string ConfirmPassword { get; set; }
}

Пароли на стороне клиента никогда не равны (~ Я всегда получаю ошибку проверки из Compare с сообщением, сообщающим мнечто они не равны), даже если они есть (я уверен в этом).HTML в браузере:

    <div class="editor-label">
        <label for="Register_Password">Password</label>
    </div>
    <div class="editor-field">
        <input class="valid" data-val="true" data-val-length="The Password must be at least 6 characters long." data-val-length-max="16" data-val-length-min="6" data-val-required="The Password field is required." id="Register_Password" name="Register.Password" type="password">
        <span class="field-validation-valid" data-valmsg-for="Register.Password" data-valmsg-replace="true"></span>
    </div>

    <div class="editor-label">
        <label for="Register_ConfirmPassword">Confirm password</label>
    </div>
    <div class="editor-field">
        <input class="input-validation-error" data-val="true" data-val-equalto="Passwords do not match." data-val-equalto-other="*.Password" id="Register_ConfirmPassword" name="Register.ConfirmPassword" type="password">
        <span class="field-validation-error" data-valmsg-for="Register.ConfirmPassword" data-valmsg-replace="true"><span class="" generated="true" for="Register_ConfirmPassword">Passwords do not match.</span></span>
    </div>

У меня такое ощущение, что все дело в этом атрибуте: data-val-equalto-other = "*. Password"

CompareAttribute работает нормально, когдаЯ использую RegisterViewModel напрямую.Кто-нибудь входил в это раньше?Это ошибка или я что-то не так делаю?Как сделать так, чтобы сравнение работало в моем случае?

Answer 1

Должно работать с атрибутом [Compare("Password", ErrorMessage = "Passwords do not match.")], но, похоже, это действительно ошибка в файле jquery.validate.unobtrusive.js.Проблема в следующем коде:

adapters.add("equalto", ["other"], function (options) {
    var prefix = getModelPrefix(options.element.name),
        other = options.params.other,
        fullOtherName = appendModelPrefix(other, prefix),
        element = $(options.form).find(":input[name=" + fullOtherName + "]")[0];

    setValidationValues(options, "equalTo", element);
});

Поэтому он пытается найти другой элемент управления с помощью метода поиска JQuery.Но "."Символ dot не экранируется в переменной fullOtherName (в вашем случае он будет содержать: "Register.Password"), как описано в этом SO вопросе .Вот почему это работает, когда вы используете только RegisterViewModel напрямую, потому что тогда в именах нет точек.

Чтобы исправить это, вам нужно добавить одну строку в функцию appendModelPrefix:

//original
function appendModelPrefix(value, prefix) {
    if (value.indexOf("*.") === 0) {
        value = value.replace("*.", prefix);
    }
    return value;
}

//fixed
function appendModelPrefix(value, prefix) {
    if (value.indexOf("*.") === 0) {
        value = value.replace("*.", prefix);
    }
    value = value.split('.').join('\\.');
    return value;
}

Answer 2

Очень хороший ответ, nemesv.

Единственное, что нужно добавить новичкам:

function g(a,b){if(a.indexOf("*.")===0)a=a.replace("*.",b);return a}

становится

function g(a,b){if(a.indexOf("*.")===0)a=a.replace("*.",b);a=a.split('.').join('\\.');return a}

in .min.js

В противном случае при публикации возвращается ошибка.