2013-09-23 6 views
7

Sto tentando di utilizzare il componente aggiuntivo Validazione Knockoutjs da GitHub. La maggior parte sembra funzionare bene ma quando provo a usare la validazione estesa mustEqual (password/conferma password) sembra che non faccia nulla. Cosa mi manca?Knockoutjs Convalida per gli esempi isSame o mustMatch

Mi piacerebbe molto imparare questa tecnica di estensione per uso futuro.

(anche tutta questa HTML e JavaScript vengono caricati nella pagina tramite AJAX chiamata. Se questo abbia a che fare con esso.)

mio javascript

function UserAccount(data) { 
     var self = this; 
     self.Password = ko.observable(data.Password).extend({ required: true, minlength: 6, message: "Password is required", maxLength: 12 }); 

     self.Firstname = ko.observable(data.Firstname).extend({ required: true, minlength: 6, message: "Firstname is required", maxLength: 40 }); 
     self.Lastname = ko.observable(data.Lastname).extend({ required: true, minlength: 6, message: "Lastname is required", maxLength: 40 }); 
     self.Email = ko.observable(data.Email).extend({ required: true, minlength: 6, message: "Email is required", email: true, maxLength: 90 }); 
     self.ConfirmPassword = ko.observable().extend({ mustEqual: self.Password()}); 
     ...........................Other Code............ 
     } 

    ko.validation.rules['mustEqual'] = { 
     validator: function (val, otherVal) { 
      alert("Hello"); 
      return val === otherVal; 
     }, 
     message: 'The field must equal {0}' 
    }; 
    $(document).ready(function() { 


     ko.applyBindings(new UserAccount(initdata), $("#UserAccount").get(0)); 
     ko.validation.registerExtenders(); 

    }); 

risposta

10

Il codice di convalida personalizzata è OK. Ma non stai chiamando correttamente il metodo ko.validation.registerExtenders();.

Anche se non è indicato esplicitamente ma è necessario chiamare ko.validation.registerExtenders();prima del si chiama ko.applyBindings.

Quindi, per risolvere il tuo codice appena bisogno di scrivere:

$(document).ready(function() { 
    ko.validation.registerExtenders(); 
    ko.applyBindings(new UserAccount(initdata), $("#UserAccount").get(0)); 
}); 

Ma si troveranno ad affrontare un altro problema: il validatore mustEqual è per il confronto di valori statici in modo che non funzionerà se si desidera confrontare due proprietà come password con conferma password.

Quello che vi serve è qualcosa di simile al user contributed "Are Same" validator:

ko.validation.rules['areSame'] = { 
    getValue: function (o) { 
     return (typeof o === 'function' ? o() : o); 
    }, 
    validator: function (val, otherField) { 
     return val === this.getValue(otherField); 
    }, 
    message: 'The fields must have the same value' 
}; 

Che cosa si può utilizzare come:

self.Password = ko.observable(data.Password).extend({ 
    required: true, 
    minlength: 6, 
    message: "Password is required", 
    maxLength: 12 
}); 
self.ConfirmPassword = ko.observable().extend({ 
    areSame: self.Password 
}); 

Demo JSFiddle.

+0

Ha funzionato. Inizialmente stavo lavorando con la funzione areSame, ma non riuscivo a farlo funzionare. Sono passato a mustEqual perché sembrava più semplice. La ko.validation ... e ko.applyBindings dovrebbero sempre essere in un $ (documento) .ready? – DanScan

+0

Il 'ko.applyBindings' dovrebbe essere chiamato dopo che il tuo DOM è stato caricato in modo che' $ (document) .ready' sia un buon posto per metterlo. Il 'ko.validation.registerExtenders();' dovrebbe essere chiamato DOPO che hai definito TUTTI i tuoi validatori personalizzati. Quindi può essere chiamato direttamente dopo 'ko.validation.rules ['areSame'] = {}' quindi non è necessario chiamarlo in '$ (document) .ready'. – nemesv

+0

Come si interrompe la convalida dal momento in cui viene attivata la prima volta che la pagina viene caricata? – DanScan

Problemi correlati