Question

我创建了一个表单以及动态创建的表单字段（名称，年龄）。在尝试使用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>

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

Answer 1

您有表单元素的重复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;
}

Answer 2

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

例如：

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

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

   }

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

Answer 3

您只获得一个元素，并使用重复的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/

Answer 4

这个错误就在这一行。 getElementById返回DOM元素而不是其值。

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

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

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

希望解决问题。

Answer 5

对于 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");

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

5 个答案: