JavaScript不验证输入从表格

嗨，大家好我有一个窗体，将用户的输入张贴到同一页面的表格中，无需重新加载。我已经完成了将输入传递给表的简单部分，并开始进行验证，但由于某种原因，它似乎无法工作。请在下面查看我的代码。JavaScript不验证输入从表格

预先感谢您

<script type="text/javascript"> 
    var qtyTotal = 0; 
    var priceTotal = 0; 
    var totalCart = 0; 

    function updateForm() { 
     fail = validateProduct(form.product.value) 
     fail += validateQuantity(form.quantity.value) 
     fail += validatePrice(form.price.value) 
     if (fail == ""){ 
     var product = document.getElementById("product").value; 

     var qty = document.getElementById("quantity").value; 
     qtyTotal = qtyTotal + parseFloat(qty); 


     var price = document.getElementById("price").value;  
     priceTotal = (qty * parseFloat(price)).toFixed(2); 

     totalCart = totalCart + parseFloat(priceTotal); 
     document.getElementById("totalCart").innerHTML="$"+totalCart; 

     var table=document.getElementById("results"); 
     var row=table.insertRow(-1); 
     var cell1=row.insertCell(0); 
     var cell2=row.insertCell(1); 
     var cell3=row.insertCell(2); 
     var cell4=row.insertCell(3); 
     cell1.innerHTML=product; 
     cell2.innerHTML=qty;   
     cell3.innerHTML="$"+price; 
     cell4.innerHTML="$"+priceTotal; 
     } 
     else{ 
    document.getElementById('errors').innerHTML = fail;} 
    return false 
    } 


     function validateProduct(field) { 
      if (field == "") return "No product name was entered.<br/>" 
      else if (field.length < 3) return "Please enter a valid name.<br/>" 
      return "" 
      } 
     function validateQuantity(field) { 
      if (field == "") return "No quantity was entered.<br/>" 
      else if (!/[0-9]*$/.test(field)) return "Quantity can only have numerical values.<br/>" 
      return "" 
      } 
     function validatePrice(field) { 
      if (field == "") return "No city was entered.<br/>" 
      else if (field.length < 2) return "Please enter a valid price with two decimal points.<br/>" 
      else if (!/[0-9]+(\.[0-9][0-9]?)?/.test(field)) return "Price can only have numerical values with two decimal points.<br/>" 
      return "" 
      } 

</script> 

<h1>Instructions</h1> 
<section> 
    <p>Please enter the desired product/services in the following table to create an order.</p> 
<section style="width:300px; margin-left:20px"> 
<div id="errors"></div> 
     <form name="order" id="order"> 
    <table> 
     <tr> 
      <td> 
       <label for="product">Product:</label> 
      </td> 
      <td> 
       <input id="product" name="product" title="Please enter only alphabetic characters" type="text" size="28" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <label for="quantity">Quantity:</label> 
      </td> 
      <td> 
       <input id="quantity" name="quantity" title="Enter item quantity" width="196px" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <label for="price">Price:</label> 
      </td> 
      <td> 
       <input id="price" name="price" title="Please enter only numeric characters" size="28" /> 
      </td> 
     </tr> 
    </table> 
    <input type="reset" name="reset" value="Reset" /> 
    <input type="button" onClick="updateForm();" value="Add to Cart"/> 
</form> 
    </section> 
</section> 
<section> 
<br> 
<p id="header">INVOICE</p> 
<table id="results" width="599"> 
    <thead> 
    <tr> 
     <th scope="col" width="96">Products</th> 
     <th scope="col" width="94">Quantity</th> 
     <th scope="col" width="98">Unit Cost</th> 
     <th scope="col" width="52">Price</th> 
    </tr> 
    </thead> 
</table> 

<table id="resultTotals" width="599"> 
<tr> 
    <td colspan="2"></td> 
    <td style="padding-left:5px" bgcolor="#CCCCCC" scope="col" width="161">Total</td> 
    <td style="padding-left:5px" bgcolor="#CCCCCC" scope="col" width="91"><div id="totalCart"></div></td> 
</tr> 
</table> 
</section>

来源

2013-10-31 Javier Lopez

我可以看到另一个问题：你是不是定义form变量试试这个：

function updateForm() { 
    var form = document.getElementById('order'); // added 
    fail = validateProduct(form.product.value); 
    ...

http://jsfiddle.net/4ZZ7b/1/

来源

2013-11-01 00:09:43 dfsq

非常感谢 –

您还没有关闭您的功能updateForm（或者更具体地说，你有没有关闭你的else上if(fail == "") - 这最终使用函数close，而不是

来源

2013-10-31 23:58:18

所以我基本上必须把我的其他内部如果大括号？ –

它不工作 –

JavaScript不验证输入从表格

回答

相关问题