JSFiddle - React, Tailwind, and code Playground

by Stephen Lujan

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<link rel="stylesheet" href="https://az564335.vo.msecnd.net/jslib/16.1.4/css/dx.common.css">
<link rel="stylesheet" href="https://az564335.vo.msecnd.net/jslib/16.1.4/css/dx.light.css">
<script src="https://az564335.vo.msecnd.net/jslib/16.1.4/js/dx.all.js"></script>
<div id="form">
</div>

JavaScript

var employee = {
    "ID": 1,
    "FirstName": "John",
    "LastName": "Heart",
    "Position": "CEO",
    "BirthDate": "1964/03/16",
    "HireDate": "1995/01/15",
    "Notes": "John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003.\r\n\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.",
    "Address": "351 S Hill St., Los Angeles, CA",
    "Phone": "360-684-1334"
};

var positions = [
    "HR Manager",
    "IT Manager",
    "Controller",
    "Sales Manager",
    "Support Manager",
    "Shipping Manager"
];

$("#form").dxForm({
    colCount: 2,
    formData: employee,
    items: ["ID", {
            dataField: "FirstName",
            editorOptions: {
                disabled: true
            }
        }, {
            dataField: "LastName",
            editorOptions: {
                disabled: true
            }
        }, {
            dataField: "Position",
            editorType: "dxTagBox",
            editorOptions: { 
                items: positions,
                value: ["HR Manager","IT Manager"],
                onValueChanged: function(e)
                {
                    $("#form").dxForm('instance').getEditor("Notes").option("disabled", true);
                },
            },
            validationRules: [{
                type: "required",
                message: "Position is required"
            }]
        }, {
            dataField: "BirthDate",
            editorType: "dxDateBox",
            editorOptions: {
                disabled: true
            }
        }, {
            dataField: "HireDate",
            editorType: "dxDateBox",
            editorOptions: { 
                value: null
            },
            validationRules: [{
                type: "required",
                message: "Hire date is required"
            }]
        }, {
            colSpan: 2,
            dataField: "Notes",
            editorType: "dxTextArea",
  ...