JSFiddle - React, Tailwind, and code Playground

by piotr

HTML

<script src="http://balin.maslosoft.com/array-validators/bower_components/jquery/dist/jquery.min.js"></script>
<script src="http://balin.maslosoft.com/array-validators/bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="http://balin.maslosoft.com/array-validators/bower_components/knockout/dist/knockout.debug.js"></script>
<script src="http://balin.maslosoft.com/array-validators/dev/src/knockout-es5.js"></script>
<script src="http://balin.maslosoft.com/array-validators/bower_components/knockout-sortable/build/knockout-sortable.js"></script>
<script src="http://balin.maslosoft.com/array-validators/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="http://balin.maslosoft.com/array-validators/dist/ko.balin.js"></script>
<script src="http://balin.maslosoft.com/array-validators/dev/src/Model.js"></script>
<script src="http://balin.maslosoft.com/array-validators/dev/src/RegExpValidator.js"></script>
<script src="http://balin.maslosoft.com/array-validators/dev/src/RequiredValidator.js"></script>
<script src="http://balin.maslosoft.com/array-validators/dev/src/EmailValidator.js"></script>
<link rel="stylesheet" href="http://balin.maslosoft.com/array-validators/bower_components/highlightjs/styles/monokai_sublime.css">
<link rel="stylesheet" href="http://balin.maslosoft.com/array-validators/bower_components/fancytree/dist/skin-win7/ui.fancytree.min.css">
<link rel="stylesheet" href="http://balin.maslosoft.com/array-validators/bower_components/bootstrap/dist/css/bootstrap.css">
<div class="form-group">
	<label class="control-label" for="txt4">Validate contenteditable if it's not empty and valid email:</label>
	<!--<div class="form-control" id="txt4" data-bind="htmlValue: text, validator: {valids: [{class: Maslosoft.Ko.BalinDev.RequiredValidator}, {class: Maslosoft.Ko.BalinDev.EmailValidator}]}" style="width:50%;"></div> <br />-->
	<input class="form-control" id="txt4" data-bind="textInput: app.model.txt3.text, validator: [{class:...

JavaScript

window.app = {};
			window.app.model = {};
      
	jQuery(document).ready(function () {
		var data1 = {
			text: 'Some Text value'
		};
		var data2 = {
			text: ''
		};
		var data3 = {
			text: 'Not valid value'
		};

		app.model.txt1 = new Maslosoft.Ko.BalinDev.Models.TextValue(data1);
		app.model.txt2 = new Maslosoft.Ko.BalinDev.Models.TextValue(data2);
		app.model.txt3 = new Maslosoft.Ko.BalinDev.Models.TextValue(data3);

		ko.applyBindings({model: app.model});
	});