How can I cause adding an invalid item to an observableArray to invalidate the validatedObservable with Knockout-Validation

Question

I have a form with some fields and a list of items which a user can add to. For the form to be valid, all of the fields on the form and in all items of the list must be valid. When a new item is added to the list it will be invalid because all of the required fields will be blank.

Unfortunately, knockout-validation doesn't seem to see this and reports the form as valid. The individual fields in the list items will validate independently and show the "This field is required." message but the validatedObservable which contains everything reports isValid() as true. Even stranger, if I cause the form to become invalid by editing one of the fields that existed before the list addition, suddenly everything starts to work properly.

Here's an example of the issue I'm working with: http://jsfiddle.net/97Lr15zq/5/

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


var viewModel = {
    items: ko.observableArray([]),
    test: ko.observable('e').extend({ required: true }),
    add: function(){
        viewModel.items.push({
        firstName: ko.observable('').extend({ required: true }),
        lastName: ko.observable('').extend({ required: true })
      });
    },
    submit: function() {
        if (viewModel.errors.isValid()) {
            alert('Thank you.');
        }
        else {
            alert('Please check your submission. Errors: ' + viewModel.errors.errors().length);
            viewModel.errors.errors.showAllMessages();
        }
    }
};


viewModel.errors = ko.validatedObservable({items: viewModel.items, test: viewModel.test});

ko.applyBindings(viewModel);

How can I get knockout-validation to start monitoring the new list items as soon as they're added?

Nick Sarabyn Nick Sarabyn · Accepted Answer · 2019-11-25T16:59:13

This isn't ideal and I'm still hoping to find a cleaner solution but for now what I ended up doing is adding an observable to the viewModel and the validatedObservable who's only purpose is to be invalidated so that knockout-validate will start picking up the changes in the new list item.

http://jsfiddle.net/97Lr15zq/6/

viewModel.errors = ko.validatedObservable({ items: viewModel.items, test: viewModel.test, invalidator: viewModel.invalidator });

How can I cause adding an invalid item to an observableArray to invalidate the validatedObservable with Knockout-Validation

1 Answers