Search code examples
javascriptknockout.jsknockout-validation

Knockout Validation of two interdependent fields


Consider the following piece of code -

var MyObjectModel = function(myObject){
var self = this;
self.myNumber1 = ko.observable(myObject.number1).trimmed();
self.myNumber2 = ko.observable(myObject.number2).trimmed();

I would like to extend myNumber1 and myNumber2, to add knockout validations such that it throws an error if both are empty, and stays fine if either has a value.

Any idea how I could go about achieving this ?


Solution

  • You can use an ko.computed to create a function which checks if at least any of both fields is set and onlyIf in the validation to execute the validation conditionally.

    var MyObjectModel = function (myObject) {
        var self = this;
        self.myNumber1 = ko.observable(myObject.number1);
        self.myNumber2 = ko.observable(myObject.number2);
    
        self.numbersHaveNoValue = ko.computed(function () {
            var value1 = self.myNumber1(), value2 = self.myNumber2();
            return !ko.validation.rules.required.validator(value1, true) &&
                   !ko.validation.rules.required.validator(value2, true);
        });
    
        self.myNumber1.extend({ required: { onlyIf: self.numbersHaveNoValue }});
        self.myNumber2.extend({ required: { onlyIf: self.numbersHaveNoValue }});
    }
    

    I have created a fiddle: http://jsfiddle.net/delixfe/aBytt/