JSFiddle - React, Tailwind, and code Playground

by codemeasandwich

HTML

<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.css">
<h1>semantic.js</h1>
<form action="/" method="post" id="my_form" class="ui form segment error">
    <div class="field">
        <label>Field</label>
        <input type="text" name="name" id="in1">
    </div>
    <div class="field">
        <label>eMail</label>
        <input type="email" name="email" id="in2">
    </div>
       
    <button type="submit" class="ui button">Submit</button>
</form>

CSS

body {
    padding: 1em;
}

JavaScript

$('#my_form').form(
{
    name:
    {
        identifier: 'name',
        rules:
        [
            {
                type: 'empty',
                prompt: 'Kung-Fu NO good'
            }
        ]
    },
    email:
    {
        identifier: 'email',
        rules:
        [
            {
                type: 'empty',
                prompt: 'Other NO good'
            }
        ]
    }
    
}, {
      on: 'blur',
      inline: 'true'
    });