Question

I have the following html code:

<form>
    <table>
    <tbody>
        <tr>
            <td>
               <span>Quantity<span class="pull-right">3</span>
               <input type="hidden" class="" value="3" name="quantity[]">
           </td>
           <td class="form-inline">
                <label>Cantidad Warehouse</label>
                <input id="qty_warehouse_1" type="text" name="cantidad_despacho[]" class="required input-mini">
           </td>
        </tr>
        <tr>
        <tr>
            <td>
               <span>Quantity<span class="pull-right">5</span>
               <input type="hidden" class="" value="5" name="quantity[]">
           </td>
           <td class="form-inline">
                <label>Cantidad Warehouse</label>
                <input id="qty_warehouse_2" type="text" name="cantidad_despacho[]" class="required input-mini">
           </td>
        </tr>
        <tr>
    </tbody>
</table>
            <button id="submit" value="send" name="button">Send</button>
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Where each row is dynamically generated. I need to perform a validation for each input with the name Qty_warehouse so its max value won’t be greater than the hidden value at the same row. This is what i’ve been trying to do:

$(document).ready(function() {
    $("form").validate();
    $("[id*='qty_warehouse']").rules("add", {
        required: true,
        max: function() {
        return $(this).parents("tr").eq(0).find("input[name='quantity[]']").val();
        },
        min: 0,
        messages: {
            required: "Introduzca la cantidad disponible en despacho"
        }
    });

    $("#submit").click(function() {
        alert($("form").valid());
    });
});​

Any help will be greatly appreciated. this is the fiddle link if you’d like to make some tests. Fiddle

Answer 1

Within your max function this is not what you think it is, it is the window. To verify, simply call console.log(this) inside the function and inspect in browser console.

Add an argument for element to the max function and use that to start the traverse. Also convert the input value to a number.

  max: function(element) {
        var max=   $(element).parents("tr").eq(0).find("input[name='quantity[]']").val();    
        return 1*max;
    }

DEMO: http://jsfiddle.net/wHdKt/1/