JSFiddle - React, Tailwind, and code Playground

by Estevez Ben Lajamin

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
    <link href="https://cdn.rawgit.com/mdehoog/Semantic-UI-Calendar/217c3a03/dist/calendar.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
    
<form id="pre_registration_form">
  <input type="text" name="visitor_name">
  <button>
    click me
  </button>
</form>

JavaScript

$('#pre_registration_form').form({
          fields: {
           	visitor_name: {
        rules: [
          {
            type   : 'empty',
            prompt : 'Try again'
          }
        ]
      }, 
          },
          inline: true,
          on: 'change'
        });