Question

My viewmodel has a ko.observable members that store dialog state objects. Each dialog object has all sorts of members corresponding to input fields in a dialog. I would like to add validation to the dialogs using the KnockoutJS validation plugin.

I don’t, however, want to add validation to my entire view model, but rather just to my dialogs. When I tried extending the dialogs like this:

    this.dialog = ko.observable(new RegistrationDialog(self)).extend({validatable: true});

things didn’t work right: the isValid() and errors() methods were not defined, and validation wasn’t working properly. I’ve created a jsfiddle to illustrate this. When I press the start button, the dialog opens (pardon the lack of CSS), but pressing enter doesn’t generate any error messages. email validation also fails to work, showing the message ‘true is not a proper email address.’

Answer 1

I would go with the documentation:

this.dialog = ko.validatedObservable(new RegistrationDialog(this));

Then fix some bugs in your fiddle:

• data-blind
• click handler on the form (instead of submit, I assume)
• on the register button you have enable: isValid which should be enable: isValid() (I also removed the click binding because of fixing the form submit binding)

I think that was it. Updated fiddle here