2017-08-21 38 views
0

我有一个asp.net上的窗体,动态创建表格行上的按钮点击使用JavaScript。我遇到的问题是这些动态表格行是可选的,以便用户填写,以便在提交表单时填充或留空。动态添加的表格行的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++; 
     }); 

所以你可以在代码中看到,每个按钮点击将增加2个文本框的姓名和电子邮件哪些是可选的一个新表行供用户填写的唯一途径我现在可以想到的是做一个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()); 
       } 
      } 
     }); 

回答

1

在创建元件concate行号类= “dynamicText”(dynamicText + ROWNUMBER)。不要忘记增加变量。

在验证(或提交)检查rownumber并重复它rownumber次。 虽然它在循环中迭代获取循环中类“dynamicText”和rownumber的所有元素,所以您将获得具有类dynamicText1或dynamicText2等的元素......它将是元素数组。

然后在循环内检查任何文本框是否有值,然后其他文本框必须填写。

+0

感谢这解决了它。 –