JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="main">
    <div class="validation-summary">
        <h4>Form Status:</h4><mark data-bind="text: IsValid() ? 'Valid' : 'Invalid', css: ValidationState()"></mark>
    </div>
    <form id="main-form" method="post" action="">
        <label for="first-name">First Name:</label>
        <input type="text" name="first-name" id="first-name" data-bind="textInput: FirstName" />
        <br />
        <label for="last-name">Last Name:</label>
        <input type="text" name="last-name" id="last-name" data-bind="textInput: LastName" />
        <br />
        <input type="submit" value="Submit" name="Submit" id="form-submit" />
    </form>
</div>

CSS

#main-form {
    display: block;   
    font-family: Verdana, Arial, Sans-serif;
    font-size: small;
}
#main-form INPUT[type='text'] {
    width: 160px;
}
#main-form LABEL {
    width: 90px;
    display: inline-block;
}
.validation-summary {
    padding: 3px;
    border-radius: 3px;
    margin: 3px auto;
    width: 50%;
    display: block;
}
.validation-valid {
    border: solid 1px #44bb44;
}
.validation-invalid {
    border: solid 1px #bb4444;
}
H4 {
    display: inline-block;
    margin-right: 6px;
}
.validation-summary MARK {
    background-color: transparent;
    display: inline;
    border: solid 1px #000000;
    border-radius: 3px;
    padding: 3px;
    display: inline-block;
}
.validation-summary MARK.valid {
    border: solid 1px #44bb44;
}
.validation-summary MARK.invalid {
    border: solid 1px #bb4444;
}

JavaScript

$(function() {
    ko.applyBindings(model);
    model.setInitialState();
});
var Factories = (function () {
    var ObjectCreationException = function(data) {
        var self = this;
        self.FormattedMessage = "";
        self.Value = "";
        //the name property is left lowercase so that the name of the type will be able to be read by developer consoles in the debugging and output windows.
        self.name = "ObjectCreationException";
        if(data != null) {
            self.FormattedMessage = data.MessageFormat;
            self.Value = data.Value;
        } // end if
        //DOC_IMPORTANT: Self invoking function is required as the message prototype is a string value, this allows us to perform logic but show the correct value to console's and debuggers.
        self.message = function() {
           return self.FormattedMessage.replace("{0}", self.Value);  
        }();
    };
    ObjectCreationException.prototype = new Error();
    var internalValidationRuleFactory = (function() {
        var types = null;
        internalCreate = function(aType) {
            if(aType != null && aType != undefined && aType != "") {
                if(types != null) {
                    if(types[aType] != undefined) {
                        return true;
                    } else {
                        throw new ObjectCreationException({MessageFormat: "No type binding for the name: '{0}', was found.", Value: aType});
                    } // end if/else
                } else {
                    throw new ObjectCreationException({MessageFormat: "No type bindings configured."});
                } // end if/else
            } else {
                throw new ObjectCreationException({MessageFormat: "No type specified"});
            }
        } // end function internalCreate
        return {
            CreateInstance: function (aType) {
                return (function(type) {
                    if(internalCreate(type)) {
                        var...