JavaScript表单验证行HTML表格

Question

出于某种原因，我的JavaScript表单验证未通过的每一行去在表中。 我创建的表与下面的代码： 的$ USR变量只是另一个过程的结果：

<form name="myForm" action="addAccessories.php" method="post" onsubmit="return validateForm(this);"> 
     <table border="1" id="IT"> 
      <tr> 
       <th>Barcode<em>*</em></th> 
       <th>Current stock</th> 
      </tr>  
     <?php 
      for($id=1; $id<=$usr; $id++){     
     ?> 
      <tr>      
       <td><input type="hidden" name="id[]" value="<?php echo $id; ?>" /> 
        <input type="text" name="bar_code<?php echo $id; ?>" id="bar_code<?php echo $id; ?>" value="" /></td>     
       <td><input type="text" name="num_stock<?php echo $id; ?>" value="0" id="num_stock<?php echo $id; ?>"/></td> 
     <?php 
      } 
     ?> 
      <tr> 
       <td> </td> 
       <td> <button data-theme="b" input type="submit" name="Submit" value="Submit">Add accessories</button></td> 
      </tr> 
     </table> 
    </form> 

行从该表中的数目是：行数= $ USR + 1

我验证表单代码：

<script type="text/javascript">   
function validateForm(){  
var errors = [];   
for(i = 1; i < document.getElementById("IT").rows.length; i++){ 
     var barcode = document.getElementById('bar_code'+i).value; 
    var des = document.getElementById('description'+i).value; 
    var num_stock = document.getElementById('num_stock'+i).value;   

    if(barcode == null || barcode == ""){ 
     errors[errors.length] = "You must enter barcode."; 
    } 
    if(isNaN(num_stock)){ 
     errors[errors.length] = "Current stock must be an integer"; 
    } 
    if(num_stock < 0){ 
     errors[errors.length] = "Current stock must be a positive number"; 
    } 

    if (errors.length > 0) { 
    reportErrors(errors); 
    return false; 
    } 
    return true; 
    } 
} 
function reportErrors(errors){ 
var msg = "There were some problems...\n"; 
for (var i = 0; i<errors.length; i++) { 
    var numError = i + 1; 
    msg += "\n" + numError + ". " + errors[i]; 
} 
alert(msg); 
} 
</script> 

该过程只验证表中的第一行，然后停止。任何人都可以告诉我哪里出了问题，以及如何解决它？ 非常感谢您的帮助

Answer 1

您的代码使生活的方式复杂得多，它需要的。一个更简单的方法就是处理表单控件，例如因为你已经在传递一个参考的形式从提交监听器：

function validateForm(form) { 
    var errors = []; 
    var c, cs = form.elements; 
    var reB = /^bar_code/; 
    var reN = /^num_stock/; 
    var reD = /^[0-9]+$/; 

    for (var i=0, iLen=cs.length; i<iLen; i++) { 
    c = cs[i]; 

    if (reB.test(c.name) && c.value == '') { 
     errors.push('You must enter barcode.']; 

    } else if (reN.test(c.name) && !reD.test(c.value)) { 
     errors.push('Stock number must be a positive integer.']; 
    }  
    } 

    // deal with errors... 

} 

注意的是，在测试：

> barcode == null || barcode == "" 

条码是一个字符串，所以第一个测试将永远不会返回true，且如果你想看看它是否是空的，第二个就足够了。