knockout.js - ko.validation with multi-step wizard style models -

i trying convert this answer use ko.validation.

i stuck @ getting next button enable when model state valid, code below not evaluating correctly:

self.modelisvalid = function() {         self.currentstep().model().isvalid(); }; 

i stuck , appreciate fresh eyes take look. model validate ok (with error messages shown) final step validate each model modelisvalid controls next button.

a jsfiddle here, , code below.

ko.validation.configure({     insertmessages: false,     decorateelement: true,     errorelementclass: 'error' });  function step(id, name, template, model) {     var self = this;     self.id = id;     self.name = ko.observable(name);     self.template = template;     self.model = ko.observable(model);      self.gettemplate = function() {         return self.template;     }; }  function viewmodel(model) {     var self = this;      self.namemodel = ko.observable(new namemodel(model));         self.addressmodel = ko.observable(new addressmodel(model));      self.stepmodels = ko.observablearray([             new step(1, "step1", "nametmpl", self.namemodel()),             new step(2, "step2", "addresstmpl", self.addressmodel()),             new step(3, "confirmation", "confirmtmpl", {namemodel: self.namemodel(), addressmodel:self.addressmodel()})]);      self.currentstep = ko.observable(self.stepmodels()[0]);      self.currentindex = ko.computed(function() {         return self.stepmodels.indexof(self.currentstep());     });      self.gettemplate = function(data) {         return self.currentstep().template();     };      self.cangonext = ko.computed(function() {         return (self.currentindex() < (self.stepmodels().length - 1));     });          self.modelisvalid = function() {         self.currentstep().model().isvalid();     };      self.gonext = function() {         if (((self.currentindex() < self.stepmodels().length - 1) && ($('.validationmessage:visible').length <= 0))) {             self.currentstep(self.stepmodels()[self.currentindex() + 1]);         }     };      self.cangoprevious = ko.computed(function() {         return self.currentindex() > 0;     });      self.goprevious = function() {         if ((self.currentindex() > 0 && ($('.validationmessage:visible').length <= 0))) {             self.currentstep(self.stepmodels()[self.currentindex() - 1]);         }     }; }  namemodel = function (model) {     var self = this;      //observables     self.firstname = ko.observable(model.firstname).extend({ required: true });     self.lastname = ko.observable(model.lastname).extend({ required: true });      return self; };  addressmodel = function(model) {     var self = this;      //observables     self.address = ko.observable(model.address).extend({ required: true });;     self.postalcode = ko.observable(model.postalcode).extend({ required: true });;     self.city = ko.observable(model.city).extend({ required: true });;      return self; };       var viewmodelfromserver = {         "firstname": "john",         "lastname": "doe",         "address": "123 main st",         "postalcode": "53201",         "city": "milwaukee"     };  ko.applybindings(new viewmodel(viewmodelfromserver)); 

edit kevin's answer

the final view not showing, turned out because no validation group defined view, changed modelisvalid function following:

self.modelisvalid = ko.computed(function () {     if (typeof(self.currentstep().model().isvalid) != "undefined") {          return self.currentstep().model().isvalid();     }     else         return true; // no validation used viewmodel, return true }); 

this seems work, although javascript newbie!

you've applied validation rules individual observables in name , address model, trying use grouped functionality without explicitly doing grouping in each model:

namemodel = function (model) {     var self = this;      //observables     self.firstname = ko.observable(model.firstname).extend({ required: true });     self.lastname = ko.observable(model.lastname).extend({ required: true });      ko.validation.group(self);      return self; }; 

also, need make modelisvalid computed observable:

self.modelisvalid = ko.computed(function() {     return self.currentstep().model().isvalid(); }); 

updated fiddle - http://jsfiddle.net/jntjw/4/