Jquery验证:动态内联验证

时间:2012-06-16 13:43:54

标签: jquery jquery-validate

我有以下HTML代码:

<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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

每行动态生成。我需要为每个输入执行一个名为 Qty_warehouse的验证,因此它的最大值不会大于同一行的隐藏值。这就是我一直在努力做的事情:

$(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());
    });
});​

任何帮助将不胜感激。如果您想进行一些测试,这是小提琴链接。 Fiddle

1 个答案:

答案 0 :(得分:2)

在您的max函数中this不是您认为的,而是window。要进行验证,只需在函数内调用console.log(this)并在浏览器控制台中进行检查。

将元素的参数添加到max函数并使用它来启动遍历。同时将输入值转换为数字。

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

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