Question

 $(document).ready(

    function (){


        // bind the recalc function to the quantity fields
        $("input[name^=qty_item_]").bind("keyup", recalc);
        // run the calculation function now
        recalc();


        // automatically update the "#totalSum" field every time
        // the values are changes via the keyup event

        $("input[name^=sum]").sum("keyup", "#totalSum");

        // automatically update the "#totalAvg" field every time
        // the values are changes via the keyup event
        $("input[name^=avg]").avg({
            bind:"keyup"
            , selector: "#totalAvg"
            // if an invalid character is found, change the background color
            , onParseError: function(){
                this.css("backgroundColor", "#cc0000")
            }
            // if the error has been cleared, reset the bgcolor
            , onParseClear: function (){
                this.css("backgroundColor", "");
            }
        });

    }

);

function recalc(){
    $("[id^=total_item]").calc(
        // the equation to use for the calculation
        "qty * price",
        // define the variables used in the equation, these can be a jQuery object
        {
            qty: $("input[name^=qty_item_]"),
            price: $("[id^=price_item_]")
        },
        // define the formatting callback, the results of the calculation are passed to this function
        function (s){
            // return the number as a dollar amount
            return "$" + s.toFixed(2);
        },
        // define the finish callback, this runs after the calculation has been complete
        function ($this){
            // sum the total of the $("[id^=total_item]") selector
            var sum = $this.sum();

            $("#grandTotal").text(
                // round the results to 2 digits
                "$" + sum.toFixed(2)
            );
        }
    );
}

</script>

<table width="500">
  <tr>
    <td align="center"><input type="text" name="qty_item_1" id="qty_item_1" value="1" size="2" /></td>
    <td align="center" id="price_item_1">$9.99</td>
    <td align="center" id="total_item_1">$9.99</td>
  </tr>
</table>

i am using the jquery calculation for the product and quantity , is there any way to make the quantity must less than 20, within the jquery and throughs validation error.ie: if the user enters the quantity >20 then it needs to show the jquery error otherwise it need to allow the user input.

Answer 1

You could use the jQuery validate plugin (http://docs.jquery.com/Plugins/validation) which is excellent for such scenarios.

Wrap the table in a FORM with an ID, e.g.:

<form id="items">
...your table markup
</form>

Initialise it like this:

$(function () {
  $('#items').validate(
    rules: {
      'qty_item_1': { required: true, max: 20 }
    },
    messages: {
      'qty_item_1': 'Please enter a value less than 20'
    }
  );
});

Then, in your recalc function check that the form is valid, like so:

function recalc(){

if($('#items').valid()) {
  // the form is valid - continue

  $("[id^=total_item]").calc(
      // the equation to use for the calculation
      "qty * price",
      // define the variables used in the equation, these can be a jQuery object
      {
          qty: $("input[name^=qty_item_]"),
          price: $("[id^=price_item_]")
      },
      // define the formatting callback, the results of the calculation are passed to this function
      function (s){
          // return the number as a dollar amount
          return "$" + s.toFixed(2);
      },
      // define the finish callback, this runs after the calculation has been complete
      function ($this){
          // sum the total of the $("[id^=total_item]") selector
          var sum = $this.sum();

          $("#grandTotal").text(
              // round the results to 2 digits
              "$" + sum.toFixed(2)
          );
      }
  );

} else {
  // the form is invalid - do nothing
}

}