JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
  <form id="myForm">
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
      <span class="error" id="nameError"></span>
      <p class="example">Example: John Doe</p>
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
      <span class="error" id="emailError"></span>
      <p class="example">Example: [email protected]</p>
    </div>
    <!-- Add more form fields as needed -->
    <button type="submit">Submit</button>
  </form>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(document).ready(function() {
      const form = $('#myForm');

      function promptUserForRules(field, rule) {
        $('<div>').text(`Enter rule for field '${field.attr('name')}' (Yes/No/Number):`).dialog({
          modal: true,
          buttons: {
            Yes: function() {
              rule.method = validateYesNo;
              rule.message = 'Invalid value for Yes/No';
              $(this).dialog('close');
            },
            No: function() {
              rule.method = validateYesNo;
              rule.message = 'Invalid value for Yes/No';
              rule.skipToQuestion = prompt('Enter the ID of the question to skip to:');
              $(this).dialog('close');
            },
            Number: function() {
              const inputType = prompt('Enter the input type (Raw/Percentage/Dollar):');
              if (inputType === 'Raw') {
                rule.method = validateNumber;
                rule.message = 'Invalid numeric value';
              } else if (inputType === 'Percentage') {
                rule.method = validateNumber;
                rule.message = 'Invalid percentage value';
                rule.isPercentage = true;
    ...