JSFiddle - React, Tailwind, and code Playground

by delixfe

HTML

<script src="https://raw.github.com/ericmbarnard/Knockout-Validation/master/Src/knockout.validation.js"></script>
<div id="test">
    <input type="text" data-bind="value: myNumber1" /><br />
	<input type="text" data-bind="value: myNumber2" />
</div>

JavaScript

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(value1, true);
    });
    
    self.myNumber1.extend({ required: { onlyIf: self.numbersHaveNoValue }});
    self.myNumber2.extend({ required: { onlyIf: self.numbersHaveNoValue }});
}

var viewModel = new MyObjectModel({});

// modify the values to trigger validation
viewModel.myNumber1('');
viewModel.myNumber2('');

ko.applyBindings(viewModel, document.getElementById("test"));