JSFiddle - React, Tailwind, and code Playground

by rasikasampath

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<div>
    Name : <input type="textbox" data-bind="value:name, valueUpdate:'afterkeydown'" required></input>
    <br>
    Preferred flavor of spam:
    <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div>
    <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div>
    <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div>
</div>
<br>
Name:  <span data-bind="text:name()"></span>
    <br>
You selected: <span data-bind="text:spamFlavor()"></span>
    <br>
<input type="button" value="click to validate" data-bind="click:buttonClick"> </input>
        
        <p data-bind="validationMessage: name"></p>

JavaScript

var viewModel = {       
    spamFlavor: ko.observable('').extend({required: true}),
    name: ko.observable('').extend({required: true}),    
    buttonClick: function(modal){
        var err = ko.validation.group(modal);
            alert(err.length);
        }
    };

ko.applyBindings(viewModel);