Question

我正在使用jQuery验证插件来确保我表中的所有输入都在0到10之间。每个表行都是由JS动态创建的，这里是我的html表和JS用于添加表行：

<form>
    <table id="lineItemTable">
        <tbody>
        <tr>
            <td>
                <input type="text" name='gross' class="gross"/>
            </td>
            <td>
                <input type="text" name='tare' class="tare"/>
            </td>
        </tr>
        </tbody>
    </table>
    <p id="add">add row</p>
</form>

$("#add").click(function() {
    var newRow = $('#lineItemTable tbody>tr:last').clone(true).insertAfter('#lineItemTable tbody>tr:last');
    newRow.find('.gross').val('');
    newRow.find('.tare').val('');
    return false;
});

这是我的jQuery验证：

$("form").validate({
    rules: {
        gross: {
            range: [0, 10]
        },
        tare: {
            range: [0, 10]
        }
    },
    submitHandler: function() {
        var tableObj = $('table tbody tr').map(function(i) {
            var row = {};
            $(this).find('td').each(function(i) {
                row[rowName] = $(this).find("input, select").val();
            });
            return row;
        }).get();
        $.ajax({
             //code omitted
        });
    }
});

我的目标是使用此验证来确保每个表行值在0到10之间，以便我可以通过$.ajax提交所有数据。

我现在遇到的问题是它只能防止第一个表行发生ajax调用。只要第一个表行遵循验证规则，任何动态创建的具有无效数据的表行都将以某种方式通过ajax发送。

有人可以帮我解决这个问题吗？

Answer 1

尝试在添加行后重新启动验证。为避免代码重复，您可以将其包装在函数中：

function initValidation() {
    $("form").validate({
        rules: {
            gross: {
                range: [0, 10]
            },
            tare: {
                range: [0, 10]
            }
        },
        submitHandler: function() {
            var tableObj = $('table tbody tr').map(function(i) {
                var row = {};
                $(this).find('td').each(function(i) {
                    row[rowName] = $(this).find("input, select").val();
                });
                return row;
            }).get();
            $.ajax({
                //code omitted
            });
        }
    });    
}

$("#add").click(function() {
    var newRow = $('#lineItemTable tbody>tr:last').clone(true).insertAfter('#lineItemTable tbody>tr:last');
    newRow.find('.gross').val('');
    newRow.find('.tare').val('');
    initValidation();
    return false;
});

Answer 2

我解决了这个问题，但显然经过大量的研究后，这似乎是一个奇怪的问题。

事实证明我必须修改jquery.validate.js库以使其工作。我猜在验证子元素时lib不能提供足够的支持。

在checkForm下，更改以下代码：

checkForm: function() {
            this.prepareForm();
            return this.valid();
         },

要：

checkForm: function() {
             this.prepareForm();
             for ( var i = 0, elements = ( this.currentElements = this.elements() ); elements[ i ]; i++ ) {
            if(this.findByName(elements[i].name).length!=undefined &&this.findByName(elements[i].name).length>1){
                for(var count=0; count<this.findByName(elements[i].name).length;count++){
                this.check(this.findByName(elements[i].name)[count]);
            }
        }else{
            this.check(elements[i]);
    }
    return this.valid();
},

jQuery .validate（）不适用于动态创建的表行

2 个答案: