example_calculate.html

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="jsf.js"></script>

    <script>

      $(document).ready(function() {

        $("form").jsf({
          selectInput: function(elt) { return elt.parent() }
         });
       });

      function isInt(val) {
        return !isNaN(parseInt(val));
      }

    </script>

    <link href="example.css" rel="stylesheet">

  </head>

  <body>
    <h1>Calculate total incl. tax</h1>

    <form>

      <input type="text" name="amount" 
             jsf:required="true"
             jsf:constraint="isInt(amount)"
             placeholder="Amount"
             />

      <input type="text" name="tax" 
             jsf:required="true" 
             jsf:constraint="isInt(amount)"
             placeholder="Tax percentage"
             />

      Total: <input type="text" name="total" 
                    jsf:readonly="true"
                    jsf:calculate="(amount && tax) ? (amount + ((amount / 100) * tax)) : 0"
                    />
      
    </form>
  </body>

</html>