JSFiddle - React, Tailwind, and code Playground

by Mark McFadden

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<label>Do you agree or disagree?</label> 
<span class="validationMessage" data-bind="validationMessage: agree"></span><br />
<input type="radio" data-bind="checked:agree" name="agree" value="1" /> Agree<br />
<input type="radio" data-bind="checked:agree" name="agree" value="2" /> Disagree
<br />
<br />
<input type="button" class="button btn" data-bind="click:submit" value="Submit" />

CSS

.validationMessage {
    color: Red;
    font-weight: bold;
}

JavaScript

$(document).ready(function () {
    ko.validation.registerExtenders();
    ko.validation.configure({
        decorateElement: true
    });
    var vm = ko.validatedObservable({
        agree: ko.observable().extend({
            required: true
        }),

        submit: function () {
            if (this.isValid()) {
                alert('success');
            } else {
                this.errors.showAllMessages();
                //alert('error');
            }
        }
    });

    ko.applyBindings(vm);
});