Validating dynamically created input elements

i have a form with dynamically created input elements

<input type='button' value='Add Another Product' id='aprod'>
<table id='page3_inside'>
    <tr id='ln1'>
        <td>
            <label for="product_cat">Product Category</label><br>
            <input type='text' class="input product_category" name="product_category[]" style="font-family:verdana; width:150px; border: 1px solid #000000;">
        </td>

        <td>
            <label for="qty">Qty</label><br>
            <input type="text"  value="" class="input qty" style="width:100px;" name="qty[]" placeholder="Qty" onkeypress="return isNumberKey(event)"/>  
        </td>

        <td>
            <label for="unit">Unit</label><br>
            <input type='text' class="input unit" style="width:100px;" name="unit[]">
        </td>
        <td>
            <label for="brand">PO Number</label><br>
            <input type="text" value="" class="input po" name="po[]" placeholder="PO Number" style='width:150px; height:28px;'/>
        </td>

    </tr>               
    </table>

JQUERY for appending elements

<script>
$('#aprod').on('click', function() {
$('#ln1').clone().appendTo('#page3_inside');
prodnum = prodnum + 1;
$('#conf_prodnum').val(prodnum);
});
</script>

since all input fields belongs to a class how do I validate each of them.
I did this using id as selector but how to do it with class as selector?

thanks.


Source: jquery

Leave a Reply