JSFiddle - React, Tailwind, and code Playground

by jwstott

HTML

<link rel="stylesheet" href="http://cistore.blob.core.windows.net/cdn/bootstrap/2.3.2/bootstrap-combined.min.css">
<script src="http://cistore.blob.core.windows.net/cdn/bootstrap/2.3.2/bootstrap.min.js"></script>
<script src="http://cistore.blob.core.windows.net/cdn/knockout/knockout-2.3.0.min.js"></script>
<script src="http://cistore.blob.core.windows.net/cdn/knockout/knockout.validation.js"></script>
<div class="row-fluid">
    <form class="form-horizontal span9">
        <div class="ci-tight control-group">
            <label class="control-label">
                <label>UserName:</label>
            </label>
            <div class="controls">
                <input type="text" class="span6" data-bind="value: UserName" /> <span class="help-inline">* required</span>

            </div>
        </div>
        <div class="ci-tight control-group" data-bind="visible: StudentID()">
            <label class="control-label">
                <label>StudentIdentifier:</label>
            </label>
            <div class="controls">
                <input type="text" class="span6" data-bind="value: StudentIdentifier" />
            </div>
        </div>
        <div class="ci-tight control-group">
            <label class="control-label">
                <label>Email:</label>
            </label>
            <div class="controls">
                <input type="text" class="span6" data-bind="value: Email" />
            </div>
        </div>
        <button type="button" data-bind='click: submit'>Submit</button>
    </form>
</div>

CSS

label {
    display: block;
}
.validationMessage {
    color: Red;
}
.customMessage {
    color: Orange;
}

JavaScript

var model = function (obj) {
    var self = this;
    obj = obj || {};
    this.UserID = ko.observable(obj.UserID);
    this.UserName = ko.observable(obj.UserName);
    this.StudentID = ko.observable(obj.StudentID);
    this.IsStudent = ko.computed(function () {
        return true;
    }, this);
    this.Email = ko.observable(obj.Email).extend({
        email: {
            message: 'Email is not properly formed'
        },
        required: {
            message: 'Email is required',
            onlyIf: function () {
                return true;
            }
        }
    });
};
var vm0 = {
    UserID: ko.observable(''),
    UserName: ko.observable('Sample Data'),
    StudentID: ko.observable('AB001'),
    StudentIdentifier: ko.observable('').extend({
        required: true
    }),
    IsStudent: ko.computed(function () {
        return true;
    }),
    Email: ko.observable('').extend({
        email: true,
        required: false
    }),
    submit: function () {
        if (vm0.errors().length === 0) {
            alert('Thank you.');
        } else {
            //alert('Please check your submission.');
            vm0.errors.showAllMessages();
        }
    }
};
var vm1 = function (obj) {
    var self = this;
    obj = obj || {};
    this.UserID = ko.observable(obj.UserID);
    this.UserName = ko.observable(obj.UserName);
    this.StudentID = ko.observable(obj.StudentID || 'aaa');
    this.StudentIdentifier = ko.observable('').extend({
        required: true
    });
    this.IsStudent = ko.computed(function () {
        return true;
    }, this);
    this.Email = ko.observable(obj.Email || '').extend({
        email: true,
        required: {
            message: 'Email is required',
            onlyIf: function () {
                return !self.IsStudent();
            }
        }
    });
    this.submit = function () {
        if (self.errors().length === 0) {
            alert('Thank you.');
        } else {
            //alert('Please check your...