JSFiddle - React, Tailwind, and code Playground

by internetH3ro

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.js"></script>
<label>
    <input type="checkbox" data-bind="checked: checkboxOne" />Checkbox One
</label><br />
<label>
    <input type="checkbox" data-bind="checked: checkboxTwo" />Checkbox Two
</label><br />
<label>
    <input type="checkbox" data-bind="checked: checkboxThree" />Checkbox Three
</label><br />
<label>
    <input type="checkbox" data-bind="checked: checkboxFour" />Checkbox Four
</label>
<span data-bind="validationMessage: customValidation"></span>

CSS

label { display: block; }
.validationMessage { color: Red; }
.customMessage { color: Orange; }

JavaScript

ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: null
});

ko.validation.rules['requiresOneOf'] = {
    getValue: function (obs) {
        return (typeof obs === 'function' ? obs() : obs);
    },
    validator: function (val, fields) {
        var self = this;
        var result = false;
        ko.utils.arrayForEach(fields, function (field) {
            if (self.getValue(field)) {
                result = true;
            }
        });
        
        return result;
    },
    message: 'Must select one option'
};
ko.validation.registerExtenders();

var ViewModel = (function () {
    function ViewModel() {
        var self = this;
        self.checkboxOne = ko.observable(true);
        self.checkboxTwo = ko.observable(true);
        self.checkboxThree = ko.observable(true);
        self.checkboxFour = ko.observable(true);
        self.customValidation = ko.observable().extend({
            requiresOneOf: [self.checkboxOne, self.checkboxTwo, self.checkboxThree, self.checkboxFour]
        });
    }
    
    return ViewModel;
})();

var vm = new ViewModel();
ko.applyBindings(vm);