JSFiddle - React, Tailwind, and code Playground

by Cristian Trifan

HTML

<script src="https://rawgit.com/Knockout-Contrib/Knockout-Validation/master/Dist/knockout.validation.js"></script>
<script src="https://rawgit.com/CogShift/Knockout.Extensions/master/Demo/Knockout.Extensions.Demo.Web/Scripts/knockout.bindings.radiochecklist.js"></script>
<label>Testing radiobuttonlist with knockout validation</label>

<br/>
<label for="yesvisit">Yes</label>
<input type="radio" id="yesvisit" required name="visitmade" value="Yes" data-bind="checked: $root.visitMade" />               
<label for="novisit">No</label> 
<input type="radio" id="novisit" required name="visitmade" value="No" data-bind="checked: $root.visitMade" />
<br/>
<input type="button" value="validate" data-bind="click: validate"/>

JavaScript

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

function ViewModel() {
    var self = this;

    self.visitMade = ko.observable().extend({ required: { message: 'Please select yes or no.'} });
    self.errors = ko.validation.group(self);
    
   
    self.validate = function () {
           if (self.errors().length == 0) {
            alert('Visit Validation Successful');
        } else {
            alert('Visit Validation Failed');
            self.errors.showAllMessages();
        }

    };
}

ko.applyBindings(new ViewModel());