JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<input type="checkbox" data-bind="checked: approveTerms"/>
<label for="algvw">Yes, I agree to the general terms and conditions</label>
<span data-bind="validationMessage: approveTerms"></span>
<button type="button" data-bind="click: stepForward">Commit order</button>

JavaScript

ko.validation.rules['checkedTerms'] = {
    validator: function (value) {
        console.log(value);
        if (!value) {
            return false;
        }
        return true;
    }
};
ko.validation.registerExtenders();
function ovm() {
    var self = this;
    self.approveTerms = ko.observable(false).extend({
        checkedTerms: { message: 'Approval required' }
    });
    self.currentStep = ko.observable(1);
    self.stepForward = function () {
        if (self.currentStep() === 1)
            commitOrder(self);
    };
}

window.vm = new ovm();
ko.applyBindings(vm);

function commitOrder(vm) {
    if (vm.approveTerms()) {
        alert("GO!");
    }
    else
        alert("Nooooooooo");
}