JSFiddle - React, Tailwind, and code Playground

by dimitrk

HTML

<script src="https://rawgithub.com/DimitrK/orthos/master/source/orthos.js"></script>

CSS

.validation-error {
    border-color: red;
}

.validation-success {
    border-color: green;
}
.onyx-input-decorator {
    display: block;
    margin: 1em;
}

JavaScript

enyo.kind({
    name: "Register",
    kind: orthos.Validatable,
    live: true,
    handlers: { // Only when live
        onLiveSuccess: "handleLiveSuccess",
        onLiveError: "handleLiveError",
    },
    withClasses: true,
    errorClass: "validation-error",
    successClass: "validation-success",
    components: [
        {kind: enyo.Scroller, classes: "enyo-fit", components:[
            {kind: onyx.InputDecorator, components:[
                {kind: onyx.Input, name: "username", placeholder: "*username", is: "required alphanumeric", min: 6, max: 15}
            ]},
            {kind: onyx.InputDecorator, components:[
                {kind: onyx.Input, name: "password",placeholder: "*password", type:"password", is: "required", min: 6}
            ]},
            {kind: onyx.InputDecorator, components:[
                {kind: onyx.Input, name: "passwordVerify", placeholder: "*password again", type:"password", is: "required", sameas: "password"}
            ]},
            {kind: onyx.InputDecorator, components:[
                {kind: onyx.Input, name: "email", placeholder: "*email", is: "required email"}
            ]},
            {kind: onyx.InputDecorator, components:[
                {kind: onyx.Input, name: "word", placeholder: "a funny word", is: "optional alphabetical"}
            ]},
            {kind: onyx.Button, content: "Submit", classes:"onyx-blue", ontap: "register"},
            { kind: "onyx.Groupbox", components: [
              { kind: "onyx.GroupboxHeader", content: "Live Result" },
              { name: "liveResult", content: "No result yet", style: "padding: 8px;" }
            ]},
            {tag: "br"},
            { kind: "onyx.Groupbox", components: [
              { kind: "onyx.GroupboxHeader", content: "Object result" },
              { name: "objectResult", content: "No result yet", style: "padding: 8px;" }
            ]},
            {tag: "br"},
            { kind: "onyx.Groupbox", components: [
              { kind:...