动态添加表行的 Javascript 客户端验证

Question

我在 asp.net 上有一个表单，其中通过 JavaScript 单击按钮动态创建了表行。我遇到的问题是，这些动态表行是用户可选填写的，因此在提交表单时可以填写或留空。

根据用户的输入检查验证的好方法是什么，因此如果用户在动态添加的表格行的一个文本框中输入某些内容，则意味着需要验证另一个文本框，因此不应允许用户提交表格。

Javascript:

 $btnAddTableRow.click(function() {
            var html = '<tr>' +
                '<td><input type="text" class="dynamicText" id="txtName' +
                idCounter +
                '"/></td>' +
                '<td><input type="text" class="dynamicText" id="txtEmail' +
                idCounter +
                '"/></td>' +
                '</tr>';

            $($tblMembers).append(html);
            idCounter++;
        });

正如您在代码中看到的那样，每次单击按钮都会添加一个新的表格行，其中包含两个用于名称和电子邮件的文本框，用户可以选择填写这些文本框。我现在能想到的唯一方法是执行if else 语句来检查每个框，但这似乎效率很低。我的验证类似于，如果用户提交表单而不填写其中一个文本框(如果另一个文本框已填写)，则在需要填写的文本框周围放置一个红色边框。

谢谢!

编辑:

$('#showCounter').click(function () {
            for (var i = 1; i < idCounter; i++) {
                if ($('[id$="txtName' + i + '"]').val() !== "" || $('[id$="txtName' + i + '"]').val() !== null) {
                    console.log($('[id$="txtName' + i + '"]').val());
                }
            }
        });

Answer 1

创建元素时，将行号连接到 class="dynamicText".(dynamicText + rownumber)。不要忘记增加变量。

在验证(或提交)时检查行号并迭代它行号次。当它在循环中迭代时，会在循环中获取具有类“dynamicText”和行号的所有元素，因此您将获得具有类dynamicText1或dynamicText2等的元素...它将是元素数组。

然后在循环中检查是否有任何文本框具有值，则必须填充其他文本框。