JSFiddle - React, Tailwind, and code Playground

by Phil Glau

HTML

<div id="dialog-form" title="Notification Reason">
    <p class="validateTips">Enter a note that will be sent to the client.</p>
    <form>
        <fieldset>
            <label for="reason">Reason for Delete</label>
            <textarea rows="4" cols="50" name="reason" id="reason" class="text ui-widget-content ui-corner-all" /></textarea>
        </fieldset>
    </form>
</div>
<div id="users-contain" class="ui-widget">
     <h1>Existing Users:</h1>

    <form>
        <table id="users" class="ui-widget ui-widget-content">
            <thead>
                <tr class="ui-widget-header ">
                    <th>Name</th>
                    <th>Email</th>
                    <th>Password</th>
                    <th>Delete Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John Doe</td>
                    <td>[email protected]</td>
                    <td>johndoe1</td>
                    <td>
                        <SELECT NAME="delete_option" id="delete_options">
                            <OPTION SELECTED VALUE="select">Select
                                <OPTION VALUE="silent">Silent
                                    <OPTION VALUE="notify">Notify</select>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</div>
<button id="submit">Submit</button>

CSS

body {
      font-size: 62.5%;
  }
  label, input {
      display:block;
  }
  input.text {
      margin-bottom:12px;
      width:95%;
      padding: .4em;
  }
  fieldset {
      padding:0;
      border:0;
      margin-top:25px;
  }
  h1 {
      font-size: 1.2em;
      margin: .6em 0;
  }
  div#users-contain {
      width: 350px;
      margin: 20px 0;
  }
  div#users-contain table {
      margin: 1em 0;
      border-collapse: collapse;
      width: 100%;
  }
  div#users-contain table td, div#users-contain table th {
      border: 1px solid #eee;
      padding: .6em 10px;
      text-align: left;
  }
  .ui-dialog .ui-state-error {
      padding: .3em;
  }
  .validateTips {
      border: 1px solid transparent;
      padding: 0.3em;
  }

JavaScript

$(function () {
      var reason = $("#reason"),
          good_value = false,
          allFields = $([]).add(reason),
          tips = $(".validateTips");

      function updateTips(t) {
          // highlight the form field that needs adjusting.
          tips.text(t)
              .addClass("ui-state-highlight");
          // highlight in yellow the reason for the error.
          // the Red box highlighting stays on until fixed or canceled.
          setTimeout(function () {
              tips.removeClass("ui-state-highlight", 1500);
          }, 500);
      }

      function checkLength(o, n, min, max) {
          // check that the length is at least min long and less than max characters.
          if (o.val().length > max || o.val().length < min) {
              o.addClass("ui-state-error");
              updateTips("Length of " + n + " must be between " + min + " and " + max + " characters.");
              return false;
          } else {
              return true;
          }
      }

      $("#dialog-form").dialog({
          autoOpen: false,
          height: 300,
          width: 350,
          modal: true,
          buttons: {
              "Add Reason": function () {
                  var bValid = true;
                  allFields.removeClass("ui-state-error");
                  // the reason given must be at least 10 charachters long and
                  // no longer than 1024 characters.
                  bValid = bValid && checkLength(reason, "reason", 10, 1024);

                  if (bValid) {
                      // length requirements met, append the reason to the table
                      // and add a hidden form element with the data.
                      $("#users tbody").append("<tr id='#note'>" +
                          "<td>Reason:</td>" +
                          "<td colspan='3'>" + reason.val() + "</td>" +
                          "</tr>");
                      // add hidden form element here.
                     ...