Question

I have the following list that is dynamically generated. I would like the ability to do some Simple Jquery validation if the qty input for a product is less than the qty available, I would like to alert the user. The event I would like to use would most likely be the .change() event because I want the validation to occur before the user attempts to submit the form. The problem I’m having is I need a catch all solution since the id’s are dynamically driven. Not sure where to start.

<ul>
  <li>
    <input class="shipment_qty_field" id="qty_product_1" type="text" />
  </li>
  <li></li>
  <li></li>
  <li id ="avail_qty_product_1></li>
</ul>
<ul>
  <li>
    <input class="shipment_qty_field" id="qty_product_2" type="text" />
  </li>
  <li></li>
  <li></li>
  <li id="avail_qty_product_2"></li>
</ul>   
<ul>
  <li>
    <input class="shipment_qty_field" id="qty_product_3" type="text" />
  </li>
  <li></li>
  <li></li>
  <li id="avail_qty_product_3"></li>
</ul>

Answer 1

Take all your li’s with id = “avail_qty_product_xx” and stick the value in the li that holds the input tag as an ‘data-qty’ such as:

  <li class="qty_container" data-qty="3">
    <input class="shipment_qty_field" type="text" />
  </li>

Then you can add a change handler for the li

$('li.qty_container input').change(function() {
  threshold = parseInt($(this).closest('li').data('qty'))
   if(parseInt($(this).val()) > threshold) {
      alert('threshold exceeded!')
   }
})