Knockout Validation - How to only validate observables after saving the whole model

Question

I'm using Knockout Validation and I'm really struggling to get the fields on my form to only validate after I call save on the whole model. At the moment as the user makes there way through the form, if they enter an invalid value the error displays immediately on blur.

I would like to have it only display after I've clicked my save button, and then re-evaluate each field as the user makes changes after that.

Reduced version of my model below.

var model = ko.validatedObservable({
    sellingPrice: ko.observable().extend({
        min:0
    })
});

function Save(){
   if(!model.isValid()){
      if (model.errors().length > 0) {
             model.errors.showAllMessages(true);
       }   
       return false;
   } else {
      //save the model
   }

}

Is there a flag somewhere I should be setting to defer validation until the whole model has been validated in my save method?

http://stackoverflow.com/questions/25770933/knockout-validation-dont-validate-input-when-empty-evaluate-when-submit/26740724#26740724 — Derpy, Jun 02 '16 at 17:55
http://stackoverflow.com/questions/36084721/knockout-validation-how-to-validate-the-fields-on-button-click-not-on-input-ch — Derpy, Jun 02 '16 at 19:48

score 1 · Answer 1 · answered May 27 '16 at 15:43

You can try a using a validation group:

Look at this fiddle I wrote, I haven't tested it but it should give you an idea of how it works.

https://jsfiddle.net/xggu9Lv2/47/

var ViewModel = function() {

  var self = this;

  // Declare
  self.sellingPrice = ko.observable(null);
  self.otherThing = ko.observable(null);
  self.anotherThing = ko.observable(null);
  self.Validator = ko.observable(null);

  // Set validation rules
  self.setValidation();

  self.setValidation = function() {

    self.sellingPrice.extend({
      min: 0
    })

    self.otherThing.extend({
      required: true
    })

    self.anotherThing.extend({
      required: true
    })

    //Validation group
    self.FieldValidator = ko.validation.group({
      sellingPrice: self.sellingPrice,
      otherThing: self.otherThing,
      anotherThing: self.anotherThin
    });

  }

  self.save = function() {
    // Check the length of the validation group
    if (!this.Validator().length) {
      // All is OK!
    }
  }


};

ko.applyBindings(new ViewModel());

score 0 · Answer 2 · answered May 31 '16 at 22:03

I'd have to look at more of your code to see how the validation is being used, but as I looked over the docs I think all you need to do is look more closely at how you're rendering the validation errors.

You should be able to wrap the div that encloses your errors with a visibility or hidden binding that is bound to some other observable that you explicitly set when you are in the save method, and the validation fails.

Another option is to create your own validation object that exposes its own error observables that you bind to. We do that where I work - comment if you're interested in seeing how that is structured and I can provide a brief overview, but I kinda consider it a little bulky and it is a departure from KO validation.

Knockout Validation - How to only validate observables after saving the whole model

2 Answers2