Knockout Validation: Validation Summary displays required field errors at page load even though no edits were made

Question

I am using knockout validation and have it configured where it displays errors only when fields are modified. It works perfectly as long as "insertMessages" is true for the config.

However, I prefer using a "validation summary" at the bottom of the form, rather than inserting validation error messages beside each field. I am binding the validation summary to the model's list of errors.

The problem is the list of errors contains all errors, regardless of whether or not the corresponding viewmodel value has been modified.

How can I filter to get only the errors corresponding to modified viewmodel members?

My fiddle is using both display techniques: inserted messages and summarized messages. You can see that the inserted messages work as expected: only appearing on field change or submit; whereas the summarized messages appear immediately when the form loads.

ko.validation.init({
  errorElementClass: 'ui-state-error',
  decorateInputElement: true
});

var model = function() {
  self = this;
  self.firstName = ko.observable().extend({
    required: true
  });
  self.lastName = ko.observable().extend({
    required: true
  });
  self.errors = ko.validation.group(this);
  self.submit = function() {
    if (self.errors().length == 0) {
      alert('No errors');
    } else {
      self.errors.showAllMessages();
    }
    return false;
  };
};

ko.applyBindings(new model());

Thanks.

Answer 1

I found a way to filter for errors corresponding to modified observables.

  self.visibleErrors = ko.computed(function() {
    var errors = [];
    self.errors.forEach(function(observable) {
      if (ko.validation.utils.isValidatable(observable) && !observable.isValid() && observable.isModified()) {
        errors.push(observable.error.peek());
      }
    })
    return errors;
  });

Updated fiddle.