MVC3 CompareAttribute, bug lato client

Question

Sto usando MVC3 e voglio avere il modulo LogIn form e Register sulla stessa pagina. Per ottenere che ho costruito LogInRegisterViewModel come segue:

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

Mi dà ciò che voglio (due forme sullo stesso schermo) e post i dati per correggere i controllori ei rendimenti e visualizza gli errori per i moduli (se presenti). L'unico problema che ho è con CompareAttribute che ho sopra proprietà ConfirmPassword nel mio 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; } 
} 

lato client le password non sono mai uguali (~ ottengo sempre un errore di convalida dalla comparazione con un messaggio che mi dice che loro non sono uguali), anche se lo sono (ne sono sicuro). HTML nel browser è:

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

ho la sensazione che è tutto su questo attributo: data-val-equalTo-other = "* Password"

CompareAttribute funziona bene, quando uso RegisterViewModel direttamente. Qualcuno è venuto in questo prima? È un bug o sto facendo qualcosa di sbagliato? Come fare a confrontare per lavorare nel mio caso?

Answer 1

Dovrebbe funzionare con l'attributo [Compare("Password", ErrorMessage = "Passwords do not match.")] ma sembra che questo sia davvero un bug nel file jquery.validate.unobtrusive.js. Il problema è in questo codice:

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); 
}); 

Quindi tenta di trovare l'altro controllo con il metodo di ricerca JQuery. Ma il "." Il carattere dot non è sfuggito nella variabile fullOtherName (nel tuo caso conterrà: "Register.Password") come descritto in questo SO question. Questo è il motivo per cui funziona quando usi solo RegisterViewModel perché poi non ci sono punti nei nomi.

per risolvere il problema è necessario aggiungere una riga alla funzione 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

Molto buona risposta, nemesv.

Solo una cosa da aggiungere per i principianti:

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

diventa

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

in .min.js

In caso contrario, quando si pubblica, l'errore ritorna.