knockout component validation

[ganySA]

Hi

I am currently using knockout components (with require.js).
e.g ko.components.register('appointmentform', { require: 'mod/appointmentForm' });

I want to enable validations within this plugin. If i call component.errors().length i get the correct number of errors, however when calling:

var result = ko.validation.group(self, { deep: true });
result.showAllMessages(true);

Note: self in the above example is the component and not the "viewModel'

No messages are displayed. I can see the

is placed next to all the relevant controls. But there is no message and it is marked as display none.

My init code is as follows:

ko.validation.init({
registerExtenders: true,
messagesOnModified: true,
insertMessages: true,
parseInputAttributes: true,
messageTemplate: null
});

Does knockout validation support components?

[crissdev]

I didn't encounter any issues with components but I don't quite understand what you mean by

self in the above example is the component and not the viewModel

I've created a fiddle for this. Can you change it to match you current use case, please? This would make things much clear. Thanks.

[ganySA]

Hi

Thank you for the prompt response and the JS Fiddle!

I have updated your fiddle with a small example - more similar to what i have.

http://jsfiddle.net/e14ns3ws/

And as in my code the validation does not work.

Thanks

[crissdev]

I would say this is similar to #398

Working fiddle here. The solution basically is to disable insertMessages at the element level and manually add the span element with the validationMessage binding.

[ganySA]

Thanks for the fix.

One other issue that i think might be related to this is in the below fiddle. When try access the errors or check for them the below code does not work.

var result = ko.validation.group(self,{deep:true});

        if (result.isValid()) {
            console.log(self.errors().length);
        }

http://jsfiddle.net/4xg43kLc/

[crissdev]

That's one of the breaking changes #465 Use errors().length instead. Optionally you may create a computed around this expression.

Further reading #469

[ganySA]

Ok.... Not sure what you mean by use "errors().length"

Sorry my point was that even result.isValid() is failing... how would i call this now?

[crissdev]

Here's the updated fiddle http://jsfiddle.net/0xnyt6st/
I've also added a comment before the ko.validation.group call.

[ganySA]

Thanks all working.

[BredStik]

This seems like a good solution to obtain error messages upon the group call. However, unlike stated in the http://jsfiddle.net/0xnyt6st/ comments, the showAllMessages is not available on the result which is a simple array of strings. Is there any way to NOT display the message upon edit (messagesOnModified: false) and display them after the 'test' click? I've updated the fiddle to demonstrate the lack of 'showAllMessages' (http://jsfiddle.net/0xnyt6st/11/). Am I missing something?

[crissdev]

@BredStik I think you're a bit incorrect the way things work.

var result = ko.validation.group({ /* some model to validate */ }, { /* options */ });

// Ask for errors
result();

// show all errors
result.showAllMessages();

// check if any message is shown
result.isAnyMessageShown();

// The idea is that some methods which were previously attached 
// on the model passed to ko.validation.group are attached to result instead.

I hope this clarifies a bit.

[BredStik]

Thanks for the reply. I get it now, got confused over the result function returned value and the result object itself. Thanks for the clarifications!