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

Posted 2023-05-09

【中文标题】jQuery .validate() 不适用于动态创建的表行

【英文标题】：jQuery .validate() will not work on dynamically created table rows

【发布时间】：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 让我尝试创建一个。

那会很棒...:)

【参考方案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;
);