jQuery .validate() 不适用于动态创建的 table 行

Question

我正在使用 jQuery 验证插件来确保我的 table 中的所有输入都在 0 到 10 之间。每个 table 行都是由 JS 动态创建的，这里是我的 html table 和用于添加 table 行的 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
        });
    }
});

我的目标是使用此验证来确保每个 table 行值都在 0 到 10 之间，以便我可以通过 $.ajax.

提交所有数据

我现在遇到的问题是它只会阻止 ajax 调用发生在第一个 table 行。只要第一个 table 行遵循验证规则，任何动态创建的包含无效数据的 table 行都会以某种方式通过 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 库才能使 work.I 猜测该库在验证子元素时没有提供足够的支持。

在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() 不适用于动态创建的 table 行

jQuery .validate() will not work on dynamically created table rows

javascript

validation

ajax

jquery

jquery-validate