jQuery .validate() 不适用于动态创建的表行答案

【问题标题】：jQuery .validate() will not work on dynamically created table rowsjQuery .validate() 不适用于动态创建的表行
【发布时间】：2016-01-13 23:52:53
【问题描述】：

我正在使用 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 发送。

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

【问题讨论】：

尝试调用if($("form").valid()){ $.ajax({}) }，即$.ajax 在if 条件内。
@vijayP 不幸的是它并没有真正起作用。
正在为你创造一个可能的小提琴吗？
@vijayP 让我尝试创建一个。
那会很棒...:)

标签： javascript jquery ajax validation jquery-validate

【解决方案1】：

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

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

在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();
    }
},

【讨论】：

【解决方案2】：

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

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;
});

【讨论】：