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

Validation not working for dynamically created values

我已经创建了一个表单以及动态创建的表单字段(姓名、年龄)。在尝试使用 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 匹配的第一个元素。您应该使用相同的 class 并针对所有这些进行验证。给 class age 而不是 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;
}

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

例如:

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

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

   }

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

您只获取了一个元素并使用重复的 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;
}

JSFiddle 示例:http://jsfiddle.net/3zsLhe9c/3/

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

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

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

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

希望能解决问题。

对于 jquery 如果你使用这个 "jquery.validate.unobtrusive.js" js,我有共鸣。

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