JSFiddle - React, Tailwind, and code Playground

by Sam Carleton

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
  <form id="form1" method="post" action="http://www.google.com">
    <table>
      <tbody>
        <tr>
          <td>Declined</td>

          <td><span style="width: 4em; display: inline-block;"><input id="cbDeclined"
          name="cbDeclined" type="checkbox" /></span> Or OOF<input id="cbIsOOfFac" name=
          "cbIsOOfFac" type="checkbox" /></td>
        </tr>

        <tr>
          <td>Height</td>

          <td><input style="width: 4em;" id="txtHeight" name="txtHeight" type="number" />
          ( in Inches )</td>
        </tr>

        <tr>
          <td>Weight</td>

          <td><input style="width: 6em;" id="txtWeight" name="txtWeight" type="number" />
          (in Pounds)</td>
        </tr>

        <tr>
          <td>Device</td>

          <td><select style="width: 15em;" id="ddlDevice" name="ddlDevice">
            <option value="">
              (None)
            </option>

            <option value="4">
              LH - Lying (Hoyer Type)
            </option>

            <option value="5">
              LS - Bath Lift/Scale
            </option>

            <option value="1">
              SC - Sitting Scale
            </option>

            <option value="3">
              SH - Sitting (Hoyer Type)
            </option>

            <option value="2">
              ST - Standing Scale
            </option>

            <option value="6">
              WS - Roll On W/C Scale
            </option>
          </select></td>
        </tr>

        <tr>
          <td></td>
        </tr>

        <tr>
          <td colspan="2"><input id="BtnCancel" name="Cancel" value="Cancel" type=
          "submit" /> <input id="BtnDone" name="BtnDone" value="Done" type=
          "submit" /></td>
        </tr>
      </tbody>
    </table>
  </form>

JavaScript

var manageResidentWeightsJs = {

    initialize: function (ids) {

        var heightWarning = { low: 36, high: 84 };
        var weightWarning = { low: 50, high: 300 };

        var cbDeclined = $(ids.cbDeclined);
        var cbIsOOfFac = $(ids.cbIsOOfFac);
        var txtHeight = $(ids.txtHeight);
        var txtWeight = $(ids.txtWeight);
        var ddlDevice = $(ids.ddlDevice);

        var customMessages = new Object();

        customMessages[ddlDevice] = { required: "Please select which device was used to aquire the device." };

        $('form').validate({
            highlight: function (element, errorClass) {
                $(element).addClass("invalidElem");
            },
            unhighlight: function (element, errorClass) {
                $(element).removeClass("invalidElem");
            },
            errorPlacement: function (error, element) {
                var parent = element.parent();
                parent.append(error);
            },
            submitHandler: function (form) {
                function WeightsRangeValidator(sWnTyp, fVal, warning) {
                    var currentValue = fVal.val();
                    if (currentValue == "" || (warning.low <= currentValue && currentValue <= warning.high))
                        return true;

                    var sHighLowText = (currentValue > warning.high) ? "high" : "low";
                    var answer = confirm('Entered ' + sWnTyp + ' : ' + currentValue + ' is unusually ' + sHighLowText + '. (Expected Range: ' + warning.low + ' to ' + warning.high + '). Accept ' + currentValue + ' as entered?');
                    if (!answer)
                        fVal.focus();

                    return answer;
                } //end of function 

                if (!WeightsRangeValidator("Height", txtHeight, heightWarning)) {
                    return false;
                }

                if (!WeightsRangeValidator("Weight", txtWeight, weightWarning)) {
                    return...