JSFiddle - React, Tailwind, and code Playground

by luisvsilva

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<script src="http://www.darwinathletics.org.au/fiddles/SimpleJs.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.11/require.min.js"></script>
<p data-bind="text:someVar"></p>
<p data-bind="text:isValid()?'No Errors':'Errors'"></p>

JavaScript

ko.validation.init({
    registerExtenders: true,
    errorElementClass: 'has-error',
    decorateElement: true,
    insertMessages: false
});

define('super',function(){

var Super = Class.extend({
    init:function(){
        var self = this;
        self.someVar.extend({ required: true });
        self.valErrors = ko.validation.group(self);
        self.isValid = ko.computed(function() {
            return self.valErrors().length === 0;
        });
    }
});
return Super;
});

define('class',['super'],function(jonas){
var myClass = jonas.extend({
    init:function(){
        var self = this;
        self.someVar = ko.observable("jonas");
        self._super();
    }
});
    return myClass;
});

require( ['class'], function( myClass ) {
    ko.applyBindings(new myClass());
});