验证不适用于动态创建的值答案

【问题标题】：Validation not working for dynamically created values验证不适用于动态创建的值
【发布时间】：2015-03-05 08:46:03
【问题描述】：

我创建了一个表单以及动态创建的表单字段（姓名、年龄）。在尝试使用 javascript 验证我的年龄字段时，只有年龄字段的第一条记录在验证 - 其他的不是。

代码是：

<script type="text/javascript">

  function formValidator(){
     var age = document.getElementById('age');

   if(isNumeric(age, "Please enter a valid Age")){

     return true;

    }
   return false;
     }

    function isNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    if(elem.value.match(numericExpression)){
       return true;
      }else{
  alert(helperMsg);
     elem.focus();
 return false;
    }
  }

HTML 代码是：

    <html>
      < body>
      <div style="padding-left:70px;"> 
   <input type="button" value="Add Person" onClick="addRow('dataTable')" /> 
   <input type="button" value="Remove Person" onClick="deleteRow('dataTable')" /> 
   </div>
   </p>
   <table style="padding-left:50px;" id="dataTable" class="form" border="1"  >
   <tbody>
   <tr>
     <p>
   <td><input type="checkbox" name="chk[]" checked="checked" /></td>
    <td>
    <label>Name</label>
   <input type="text" size="20" name="name[]" id="name"   >
    </td>
     <td>
  <label>Age</label>
  <input type="text" size="20" name="age[]" id="age"  >
     </td>

     </p>
   </tr>
   </tbody>
  </table>
  <div class="clear"></div>

    </body>
    </html>

只有第一个字段正在验证。如何验证动态生成的字段？

【问题讨论】：

看起来您的表单元素有重复的 ID。仅针对与 ID 匹配的第一个元素。您应该使用相同的类并针对所有这些类进行验证。
有什么线索怎么办？
查看发布的答案
没有@ArunPrasanth 不工作。甚至都没有验证第一个字段

标签： javascript php jquery html validation

【解决方案1】：

对于 jquery，如果你使用这个“jquery.validate.unobtrusive.js”js，我有 coustion。

$("#FrmSubmitToAgent").removeData("validator");
$("#FrmSubmitToAgent").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");$("#FrmSubmitToAgent").removeData("validator");
$("#FrmSubmitToAgent").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");

【讨论】：

【解决方案2】：

您只得到一个元素并使用重复的 ID 创建它。您应该获取所有元素并使用循环检查它们。

function formValidator(){
    var ageEls = document.getElementsByName('age[]'),
        valid = true,
        i = 0;

    while (i < ageEls.length && valid) {
        valid = isNumeric(ageEls[i], "Please enter a valid Age");
        i++;
    }
    return valid;
}

JSFiddler 示例：http://jsfiddle.net/3zsLhe9c/3/

【讨论】：

我的脚本中有一个小错误。我已经修复它并在 JSFiddler 上创建了一个示例。您的 HTML 代码中也存在语法错误。和标签之间不能有
标签。

【解决方案3】：

错误在这一行。 getElementById 返回 DOM 元素而不是它的值。

var age = document.getElementById('age');

要获取 DOM 元素中的值，您应该使用 'value' 属性。

var age = document.getElementById('age').value;

希望能解决这个问题。

【讨论】：

【解决方案4】：

如果您使用的是动态值，则将动态 id 传递给 javascript 函数，然后进行验证

例如：

  for(i=0;i<results;i++) 
  {            

    <input type="text" size="20" name="age[]" id="age"<?php echo i; ?>  >

   }

并在 javascript 函数中读取所有动态 ID 并进行验证。

【讨论】：

【解决方案5】：

表单元素的 ID 重复。仅针对与 ID 匹配的第一个元素。您应该使用相同的类并针对所有这些类进行验证。给出班级年龄而不是 id 然后使用：

function formValidator(){
var age = document.getElementsByClassName('age');
for (var i = 0; i< age.length; i++) {
   if(!isNumeric(age[i], "Please enter a valid Age")){
    return false;
  }
}
return true;
}

【讨论】：

你是否修改了 DOM。您需要将班级年龄添加到所有年龄字段。
我使用类名作为数组。我该如何使用它？
将var age = document.getElementsByClassName('age');更改为var age = document.getElementsByClassName('array');
你改成。 document.getElementsByClassName('age[]');还是不行
@Nayana：你能和 html 和 js 一起分享小提琴吗？？