Question

大家好我有一个表单，可以将用户的输入发布到同一页面的表中，而无需重新加载。我已经完成了将输入传递给表并且已经开始进行验证的简单部分，但由于某种原因它似乎不起作用。请查看下面的代码。

提前谢谢

<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>

Answer 1

我可以看到另一个问题：你没有定义form变量。试试这个：

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

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

Answer 2

您尚未关闭功能updateForm（或者更具体地说，您尚未关闭else上的if(fail == "") - 最终会使用关闭功能。

javascript没有验证来自表单的输入

2 个答案: