JSFiddle - React, Tailwind, and code Playground

by Martin Renvoize

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<form id="basic-form">
  <fieldset class="basic-info">
    <div class="row well">
      <div class="col-md-6">
        <div class="form-wrapper">
          <div class="form-group">
            <legend>Sample Form</legend>
            <ol>
              <li>
                <label for="paid">Amount being paid: </label>
                <input name="paid" id="paid" type="text" pattern="\d+(\.\d{2})?" value="100.00">
              </li>
              <li>
                <label for="collected">Collected from patron: </label>
                <input name="collected" id="collected" type="text" pattern="\d+(\.\d{2})?" value="100.00">
              </li>
              <li>
                <label>Change to give: </label>
                <span id="change">0.00</span>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
</form>

JavaScript

function moneyFormat(textObj) {
  console.log("textObj");
  console.log(textObj);
  var newValue = textObj.value;
  var decAmount = "";
  var dolAmount = "";
  var decFlag = false;
  var aChar = "";

  for (i = 0; i < newValue.length; i++) {
    aChar = newValue.substring(i, i + 1);
    if (aChar >= "0" && aChar <= "9") {
      if (decFlag) {
        decAmount = "" + decAmount + aChar;
      } else {
        dolAmount = "" + dolAmount + aChar;
      }
    }
    if (aChar == ".") {
      if (decFlag) {
        dolAmount = "";
        break;
      }
      decFlag = true;
    }
  }

  if (dolAmount == "") {
    dolAmount = "0";
  }
  // Strip leading 0s
  if (dolAmount.length > 1) {
    while (dolAmount.length > 1 && dolAmount.substring(0, 1) == "0") {
      dolAmount = dolAmount.substring(1, dolAmount.length);
    }
  }
  if (decAmount.length > 2) {
    decAmount = decAmount.substring(0, 2);
  }
  // Pad right side
  if (decAmount.length == 1) {
    decAmount = decAmount + "0";
  }
  if (decAmount.length == 0) {
    decAmount = decAmount + "00";
  }

  textObj.value = dolAmount + "." + decAmount;
}

function updateChangeValues() {
  var change = $('#change')[0];
  var paid = $('#paid')[0];
  var collected = $('#collected')[0];
  var newChange = Math.round((collected.value - paid.value) * 100) / 100;
  if (newChange <= 0) {
    $('#collected').rules("add", {
      min: Number(paid.value)
    });
    change.innerHTML = "0.00";
    $('input[name="change_given"]').val('0.00');
  } else {
    change.value = newChange;
    change.innerHTML = newChange;
    moneyFormat(change);
    change.innerHTML = change.value;
    $('input[name="change_given"]').val(change.value);
  }
  $("#basic-form").valid();
}

$(document).ready(function() {

  $("#paid, #collected").on("change", function() {
    if (change != undefined) {
      updateChangeValues();
    }
  });

  $("#basic-form").validate({
    rules: {
      paid: {
        required: true
      },
      collected: {
       ...