JSFiddle - React, Tailwind, and code Playground

by iamjpg

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css">
<div class="ui grid">

  <div class="five wide column" style="margin: 0px auto; margin-top: 5vh;">

    <div class="ui form segment error">

      <h3 class="ui centered header">Please Login</h3>

      <div class="ui form theForm">

        <div class="field">
          <label>Username</label>
          <input name="username" type="text">
        </div>

        <div class="field">
          <label>Password</label>
          <input name="password" type="password">
        </div>

        <button class="primary submit ui button">Login</button>

      </div>

      <div class="ui error message"></div>

    </div>

    <div style="display: none;" class="ui segment">

      <p></p>
      <div class="ui active dimmer">
        <div class="ui loader"></div>
      </div>

    </div>

  </div>

</div>

JavaScript

$('.theForm').form({
  fields: {
    username: ['minLength[4]', 'empty'],
    password: ['minLength[6]', 'empty'],
  },
  onSuccess: function(e) {
  	e.stopImmediatePropagation();
    // Login api process here
    console.log("weed");
  }
});