JSFiddle - React, Tailwind, and code Playground

by zerolfc

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
<form class="ui form segment">
  <p>Tell Us About Yourself</p>
  <div class="two fields">
    <div class="field">
      <label>Name</label>
      <input placeholder="First Name" name="name" type="text">
    </div>
     
  </div>
  <div class="two fields">
    <div class="field">
      <label>Username</label>
      <input placeholder="Username" name="username" type="text">
    </div>
    <div class="field">
      <label>Password</label>
      <input type="password" name="password">
    </div>
  </div>


  <div class="ui primary submit button">Submit</div>

</form>

CSS

body {
  background-color: #f1f1f1;
  padding: 15px;
}

JavaScript

$(function() {

  $('.ui.form')
    .form({
      inline: true,
      fields: {
        name: {
          identifier: 'name',
          rules: [{
            type: 'empty',
            prompt: 'Please enter your name'
          }]
        },
        skills: {
          identifier: 'skills',
          rules: [{
            type: 'minCount[2]',
            prompt: 'Please select at least two skills'
          }]
        },
        gender: {
          identifier: 'gender',
          rules: [{
            type: 'empty',
            prompt: 'Please select a gender'
          }]
        },
        username: {
          identifier: 'username',
          rules: [{
            type: 'empty',
            prompt: 'Please enter a username'
          }]
        },
        password: {
          identifier: 'password',
          rules: [{
            type: 'empty',
            prompt: 'Please enter a password'
          }, {
            type: 'minLength[6]',
            prompt: 'Your password must be at least {ruleValue} characters'
          }]
        },
        terms: {
          identifier: 'terms',
          rules: [{
            type: 'checked',
            prompt: 'You must agree to the terms and conditions'
          }]
        }
      },
      onSuccess(event, fields) {

        console.log(event);
        console.log(fields);

      }
    });

});