JSFiddle - React, Tailwind, and code Playground

by carlschroedl

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<p>Fiddle for <a href="https://github.com/carlschroedl/validatedviewmodel/issues/1"
    target="_blank">https://github.com/carlschroedl/validatedviewmodel/issues/1</a>

</p>
<div>Address Type:</div>
<input data-bind="checked: addressType" type="radio"
value="dhcp" name="addressType" id="radio-dhcp">
<label for="radio-dhcp">DHCP</label>
<br/>
<input data-bind="checked: addressType" type="radio" value="static" name="addressType"
id="radio-static">
<label for="radio-static">Static</label>
<br>
<div>using static: <span data-bind="text: usingStatic"></span>

</div>
<div data-bind="visible: usingStatic">Static IP:
    <input data-bind="value: staticIp" type="text">
    <br />Static Net Mask:
    <input data-bind="value: staticNetmask" type="text">
    <br />Static Gateway:
    <input data-bind="value: staticGateway" type="text">
</div>
<button data-bind="click: handleClick">Test</button>

CSS

.error {
    background-color: red;
    color: white;
    margin: 0 5px;
    padding: 0 5px;
}

JavaScript

/*
===============================================================================
    Author:     Eric M. Barnard - @ericmbarnard                                
    License:    MIT (http://opensource.org/licenses/mit-license.php)           
                                                                               
    Description: Validation Library for KnockoutJS                             
===============================================================================
*/

(function (factory) {
    // Module systems magic dance.

    if (typeof require === "function" && typeof exports === "object" && typeof module === "object") {
        // CommonJS or Node: hard-coded dependency on "knockout"
        factory(require("knockout"), exports);
    } else if (typeof define === "function" && define["amd"]) {
        // AMD anonymous module with hard-coded dependency on "knockout"
        define(["knockout", "exports"], factory);
    } else {
        // <script> tag: use the global `ko` object, attaching a `mapping` property
        factory(ko, ko.validation = {});
    }
}(function ( ko, exports ) {

    if (typeof (ko) === undefined) { throw 'Knockout is required, please ensure it is loaded before loading this validation plug-in'; }

    // create our namespace object
    var validation = exports;
    ko.validation = validation;

    var defaults = {
        registerExtenders: true,
        messagesOnModified: true,
		errorsAsTitle: true,  			// enables/disables showing of errors as title attribute of the target element.
        errorsAsTitleOnModified: false, // shows the error when hovering the input field (decorateElement must be true)
        messageTemplate: null,
        insertMessages: true,           // automatically inserts validation messages as <span></span>
        parseInputAttributes: false,    // parses the HTML5 validation attribute from a form element and adds that to the object
        writeInputAttributes: false,    // adds HTML5 input...