JSFiddle - React, Tailwind, and code Playground

by Andrey K

HTML

<link rel="stylesheet" href="http://semantic-ui.com/dist/semantic.css">
<script src="http://semantic-ui.com/dist/semantic.js"></script>
<div class="ui form">
    <div class="client field">
        <label>Name</label>
        <input type="text" name="name" placeholder="Enter your name" value="" />
    </div>
</div>

CSS

body {
    padding: 1em;
}

JavaScript

// Add javascript here
$(".ui.form").form({
    on: "change",
    delay: 370,

    fields: {
        name: {
            identifier: "name",
            rules: [
                { type: "empty", prompt: "Please enter your name" }
            ]
        }
    },
    
    onSuccess: function() {
        alert(1);
    },
    
    onFailure: function() {
        alert(2);
    }
});