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，且如果你想看看它是否是空的，第二個就足夠了。