JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/ericmbarnard/Knockout-Validation/master/Src/knockout.validation.js"></script>
<script id="koValidationCustomMessageTemplate" type="text/html">
    <span style="color: Red" data-bind="if: field.isModified() && !field.isValid()">*</span>
</script>

<ul data-bind="foreach: errors, visible: showValidationSummary"
    style="display: none; margin-left: 5px; text-align: left;">
    <li style="color: Red"><span data-bind="text: $data"></span></li>
</ul>

<button data-bind="click: submit">Clickydoodles</button>

JavaScript

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

var TheViewModel = function(){
    var self = this;
    
    self.showValidationSummary = ko.observable(false);
    self.validate = function(){
        self.showValidationSummary(false);
        if (self.errors().length > 0) {
            self.errors.showAllMessages();
            self.showValidationSummary(true);
            return false;
        }
        else {
            return true;
        }
    };
    self.TheCheckboxListOptions = [
        "Option 1",
        "Option 2",
        "Option 3",
        "Option 4"
    ];
    
    self.TheCheckboxListSelectedValues = ko.observableArray().extend({
        required: { message: "At least one option is required." }
    });
    
    self.submit = function(){
        if(self.validate())
        {
            alert('submit');
        }
        //do nothing, validation messages will show
    };
    
    ko.validation.group(this)
};

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