Javascript 验证不适用于动态创建的值_Javascript_Php_Jquery_Html_Validation

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

javascript php jquery html validation

Javascript 验证不适用于动态创建的值,javascript,php,jquery,html,validation,Javascript,Php,Jquery,Html,Validation,我已经创建了一个表单以及动态创建的表单字段（姓名、年龄）。在尝试使用javascript验证my age字段时，只有age字段的第一条记录正在验证，而其他记录则没有代码是： <script type="text/javascript"> function formValidator(){ var age = document.getElementById('age'); if(isNumeric(age, "Please enter a valid Age"

我已经创建了一个表单以及动态创建的表单字段（姓名、年龄）。在尝试使用javascript验证my age字段时，只有age字段的第一条记录正在验证，而其他记录则没有

代码是：

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


函数formValidator（）{
var age=document.getElementById（'age'）；
如果（是数字（年龄，“请输入有效年龄”））{
返回true；
}
返回false；
}
函数为数字（elem，helperMsg）{
var numericExpression=/^[0-9]+$/；
if（元素值匹配（数值表达式））{
返回true；
}否则{
警报（helperMsg）；
元素焦点（）；
返回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匹配的第一个元素。您应该使用相同的类并针对所有元素进行验证。指定班级年龄而不是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;
}

函数formValidator（）{
var age=document.getElementsByClassName（'age'）；
对于（变量i=0；i

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

例如：

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

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

   }

for（i=0；i您只获取一个元素，并使用重复的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;
}

函数formValidator（）{
var ageEls=document.getElementsByName（'age[]），
valid=true，
i=0；
while（i

JSFiddler示例：
错误在这一行中。getElementById返回DOM元素，而不是它的值
var age = document.getElementById('age');

要获取DOM元素中的值，应该使用“value”属性
var age = document.getElementById('age').value;

希望能解决这个问题。
对于jquery，如果您使用这个“jquery.validate.unobtrusive.js”js，我有个建议
看起来您的表单元素有重复的ID。它只针对与ID匹配的第一个元素。您应该使用同一个类并针对所有元素进行验证。如何进行验证有任何线索吗？检查发布的answerno@ArunPrasanth无效。即使没有验证第一个字段，所有这些都已修改DOM。您需要添加类age到所有年龄字段。我使用类名作为数组。如何使用它？将var age=document.getElementsByClassName（'age'）；
更改为var age=document.getElementsByClassName（'array'）；ya更改为.document.getElementsByClassName（'age[]）；还是没有working@Nayana：你能和html和js一起分享小提琴吗？我的脚本中有一个小错误。我已经修复了它，并在JSFiddler上创建了一个示例。你的html代码中还有一个语法错误。在和标记之间不能有标记。
$("#FrmSubmitToAgent").removeData("validator");
$("#FrmSubmitToAgent").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");$("#FrmSubmitToAgent").removeData("validator");
$("#FrmSubmitToAgent").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");