JSFiddle - React, Tailwind, and code Playground

by Ebram

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.debug.js"></script>
<a href="#" id="createAccount">Create New Account</a> 
<div id="newAccount" title="New Account">
    <p> <span class="ui-state-highlight" data-bind='visible: accountName.hasError, text: accountName.validationMessage'> </span>

    </p>
    <form>
        <fieldset>
            <label for="name">Enter Account Name:</label>
            <br />
            <input type="text" id="accountName" data-bind='value: accountName, valueUpdate: "afterkeydown"' />
        </fieldset>
    </form>
</div>

JavaScript

$("#newAccount").dialog({
    autoOpen: false,
    width: 450,
    height: 300,
    modal: true,
    open:function(){
        ko.applyBindings(new ViewModel());
    },
    buttons: {
        "Add New Account": function () {
            // post data
            $(this).dialog("close"); 
        },
        Cancel: function () {
            $(this).dialog("close");
        }
    }
});

$("#createAccount")
    .click(function () {
        $("#newAccount").dialog("open");
    });

    ko.extenders.required = function(target, overrideMessage) {
    target.hasError = ko.observable();
    target.validationMessage = ko.observable();
 
    function validate(newValue) {
       target.hasError(newValue ? false : true);
       target.validationMessage(newValue ? "" : overrideMessage || "This field is required");
    }
 
    //validate(target());
    target.subscribe(validate); 
    return target;
};
 
function ViewModel(account) {
    this.accountName = ko.observable(account).extend({ required: "An account name is required" });
}