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 updateChangeValues() {
  var change = $('#change')[0];
  var collected = $('#collected')[0].value;
  var paid = $('#paid')[0].value;
  change.innerHTML = Math.round((collected - paid) * 100) / 100;
  if (change.innerHTML <= 0) {
    $('#collected').rules("add", {
      min: paid
    });
    change.innerHTML = "0.00";
    $('input[name="change_given"]').val('0.00');
  } else {
    change.value = change.innerHTML;
    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: {
        required: true
      }
    }
  });

});